先看看，非 CSS 方式实现的波浪效果： 2非CSS实现方式 使用 SVG 实现波浪效果 借助 SVG ，是很容易画出三次贝塞尔曲线的。...原理 原理十分简单，我们都知道，一个正方形，给它添加 border-radius: 50%，将会得到一个圆形。 border-radius：用来设置边框圆角，当使用一个半径时确定一个圆形。.../chokcoco/iCSS/issues/15） 可能有部分同学，还存在疑问，OK，那我们把上面的效果缩小 10 倍，将视野之外的动画也补齐，那么其实生成波浪的原理是这样的： 图中的虚线框就是我们实际的视野范围...因为： 中间高，两边低的效果不符合物理学原理，看上去十分别扭； 4使用纯 CSS 实现波浪进度图 好，既然掌握了这种方法，下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图...的值； 在动画过程中，利用 transform 对旋转椭圆进行轻微的位移、变形； 上面也演示到了，多个椭圆同时转动，赋予不同时长的动画，并且添加轻微的透明度，让整个效果更佳逼真。
举个栗子 SVG 线条动画，在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面，看看最近项目里的一个小需求，一个这种形状的进度条： ?...class：就是我们熟悉的 class width | height： 定义 svg 画布的大小 viewbox： 定义了画布上可以显示的区域，当 viewBox 的大小和 svg 不同时，viewBox...上面，我们给两个 polyline 都设置了 class，SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写，更重要的是可以配合 CSS 动画一起使用。...border-width，给 svg 图形设定边框宽度； stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色； stroke-linejoin | stroke-linecap...SVG 线条动画实现圆形进度条 多 SVG 图形线条动画配合 之前我司一个 h5 里面应用过的，多SVG 图形线条动画配合，可以制作一些比较酷炫的动画，很有科技感。 ?
有时想给图片加点花样，比如进行圆形裁剪，以下是对比效果，注意人物的毛衣下方，图库不用重新准备，使用DAX可以精准裁剪。 有人可能想到，图片上方叠加一个SVG的圆形标签不就好？...因此，如果需要圆形裁剪和图像清晰度二者得兼，还是需要叠加方式，只不过不能直接叠加一个圆圈，而是用PPT画一个这样的造型，圆圈和正方形相交的地方填充上颜色，圆圈内部无色，将形状另存为SVG矢量图，记事本打开复制里面的代码...这样对圆圈外部的毛衣进行了遮挡，圆圈内部没有颜色，使得头像得以显示。蓝色可以设置为和背景色相同，从而产生裁剪效果。 叠加的清晰度和原图保持一致，裁剪后的图片可以用在表格矩阵和新卡片图。...---- 新卡片图是Power BI迄今为止最强大的三大视觉对象之一（另外两个是表格和矩阵） 《卡片图添加异形边框》 《卡片图主次指标组合》 《卡片图总分结构》 《卡片图添加地图》 《卡片图添加下划线...》 《卡片图添加折线趋势》 《卡片图折线添加动画》 《卡片图折线添加首尾标记》 《卡片图叠加进度条》 《卡片图添加天气动画图标》 《卡片图模拟微信日周月对比》 《卡片图指标与排名组合》 《卡片图添加麦肯锡华夫饼图
相对于WPF/Silverlight，UWP的动画系统可以说有大幅提高，不过本文无意深入讨论这些动画API，本文将介绍使用Shape做一些进度、等待方面的动画，除此之外也会介绍一些相关技巧。 1....使用StrokeDashOffset做等待提示动画 圆形的等待提示动画十分容易做，只要让它旋转就可以了： ? 但是圆形以外的形状就不容易做了，例如三角形，总不能让它单纯地旋转吧： ?...使用StrokeDashArray做进度提示动画 StrokeDashArray用于将Shape的边框变成虚线，StrokeDashArray的值是一个double类型的有序集合，里面的数值指定虚线中每一段以...用StrokeDashArray做进度提示的基本做法就是将进度Progress通过Converter转换为分成两段的StrokeDashArray，第一段为实线，表示当前进度，第二段为空白。...假设一个Shape的边长是100，当前进度为50，则将StrokeDashArray设置成{50，double.MaxValue}两段。 做成动画如下图所示： ?
当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。 使用 SVG 实现波浪效果 借助 SVG ，是很容易画出三次贝塞尔曲线的。...原理 原理十分简单，我们都知道，一个正方形，给它添加 border-radius: 50%，将会得到一个圆形。 border-radius：用来设置边框圆角，当使用一个半径时确定一个圆形。...，下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图。...一些小技巧 单纯的让一个 border-radius 接近 50 的椭圆形旋转，动画效果可能不是那么好，我们可以适当的添加一些其他变换因素，让动画效果看上去更真实： 在动画过程中，动态的改变 border-radius... 的值； 在动画过程中，利用 transform 对旋转椭圆进行轻微的位移、变形； 上面也演示到了，多个椭圆同时转动，赋予不同时长的动画，并且添加轻微的透明度，让整个效果更佳逼真。
当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。 使用 SVG 实现波浪效果 借助 SVG ，是很容易画出三次贝塞尔曲线的。...原理 原理十分简单，我们都知道，一个正方形，给它添加 border-radius: 50%，将会得到一个圆形。 ? border-radius：用来设置边框圆角，当使用一个半径时确定一个圆形。...可能很多人看到这里还没懂旋转起来的意图，仔细盯着一边看，是会有类似波浪的起伏效果的。 而我们的目的，就是要借助这个动态变换的起伏动画，模拟制造出类似波浪的效果。...，下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图。...的值； 在动画过程中，利用 transform 对旋转椭圆进行轻微的位移、变形； 上面也演示到了，多个椭圆同时转动，赋予不同时长的动画，并且添加轻微的透明度，让整个效果更佳逼真。
本文是Power BI新卡片图系列第12篇分享，前11篇如下： 《Power BI巅峰之作：新卡片图》 《卡片图添加异形边框》 《卡片图主次指标组合》 《卡片图总分结构》 《卡片图添加地图》...《卡片图添加下划线》 《卡片图添加折线趋势》 《卡片图叠加进度条》 《卡片图添加天气动画图标》 《卡片图模拟微信日周月对比》 《卡片图指标与排名组合》 ---- Power BI 2023年6月新推出的卡片图打开了图表新局面...（不了解新卡片图参考此文：Power BI可视化的巅峰之作：新卡片图），麦肯锡擅长使用华夫饼图表达百分比，本文介绍新卡片图如何实现类似风格。...下图展示了将华夫饼图放在指标右上方，图表和数字相结合。 新建一个新卡片图，放入指标或者维度，图像填充下方的SVG华夫饼度量值，图像位置位于右侧，图像大小稍微小一点，本例为40像素。...，可以将图像位置设置为下方，图像大小放大，本例为150像素。
二、通过border-radius绘制圆环 我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个border-radius值为50%。...所以我们可以通过控制元素边框和内容区的大小，将元素的内容区域作为内圆，将元素的边框区域作为外圆，从而绘制出一个圆环。...3px solid red; /*将上边框颜色设置为红色高亮，以便旋转的时候能够看到旋转的效果*/ border-radius: 50%; /*将边框和内容区域都变成圆形*/ } 此时效果如下:...设置为0 0 50 50，表示截图区域为左上角坐标为(0, 0)，右下角坐标为(50,50)的矩形区域内，即会截取这个区域内的矢量图，然后将截取的矢量图放到svg的可显示区域内，同时会根据svg可显示区域的大小等比例进行缩放...截图区域中，绘制的圆的圆心正好在截图区域的中心，所以截图区域四周边框与绘制的圆之间有5px的距离，而圆的半径为20px，所以比例为1:4，现在将svg显示区域变为60px，所以也需要将截图区域等比例放大并占满整个
在日常的圆环动画中，也会有类似的倒计时效果，只不过圆环是规则的，实现起来比较简单。但是基于圆环效果，再加上svg的mask特性，就可以实现此类特殊效果。 ?...圆环效果 在一些页面中，经常可以看到一些圆环进度条，因为svg实现简单，所以这些基本上都是用svg的实现，svg circle是svg绘制圆形矢量图的属性，它支持设置以下属性： cx，cy：坐标位置 r...在实现圆环效果时，也是这个原理，stroke-width表示圆环的边框宽度，stroke-dasharray的第一个参数为圆环边框的可见长度，stroke-dasharray的第二个参数为圆环边框的非可见长度...此时整个圆环的可见长度为0，非可见长度为a，整个圆环不可见，表现为圆环进度条为0，若增大可见长度，便可以看到圆环进度条增长了。 ? [ 可见长度为0 ] ? [ 可见长度为10% ] ?...圆环动画 svg的animate属性可以实现svg动画，它支持设置以下属性： attributeName：要变化的元素属性名称 attributeType：CSS | XML | auto begin，
元素：定义组，用于将 SVG 元素分组在一起。 元素：定义全局属性，可用于应用于多个 SVG 元素。...它们都具有各自的优点和缺点，适用于不同的场景。 SVG 是基于 XML 的矢量图形，可以无损缩放。这意味着 SVG 图形可以以任意大小显示，而不会失去质量。...SVG 和 Canvas 的具体区别： 特性 SVG Canvas 图像类型 矢量 位图 缩放 无损 有损 图形类型 矩形、圆形、路径等 任意 操作 CSS、JavaScript JavaScript... 表示计算的结果。 为表单创建密钥对，通常用于密钥交换。 定义任何类型的任务的进度条。 衡量已知范围内的标量值或分数。...建议使用CSS 来设置文本对齐方式。 不推荐 定义目录列表。 建议使用 元素代替。 不推荐 设置文本的字体大小、颜色、样式等。 建议使用CSS 来设置文本样式。
CSS在网页上生成一个圆形的四种方法 border-radius SVG clip-path radial-gradient # border-radius 是最简单的应用，并且得到了广泛的支持。...该border-radius属性还将影响边框，阴影和元素的触摸/单击目标大小。...SVG可以包含一个元素，该元素的样式可以类似于任何其他路径。...它们得到了很好的支持，并且可以进行动画制作，但是与其他技术相比，它们需要更多的标记。为防止视觉上截断形状，请确保圆的半径（加上其笔触宽度的一半，如有）略小于SVG的半径viewBox。...任何内容都将位于该形状的顶部，但其布局（包括触摸/点击目标大小）将不受影响。根据浏览器的不同，圆的边缘可能会出现锯齿状或模糊不清。
[HorizontalWaveProgressView.GIF] 网上垂直的水波纹进度条很多，但横向的很少，将垂直的水波纹改为水平的还遇到了些麻烦，现在完善后发布出来，希望遇到的人少躺点坑。...\ path的起始点为(0,0)可根据进度动态改变，然后循环画曲线，长度是有几个波浪就是多长，然后连接到view高度的位置，最后到(0，0)，形成一个封闭的区域，这样就实现了一个填充的水波效果。...secondWavePath.lineTo(0, waveActualSizeHeight); secondWavePath.close(); return secondWavePath; } 3.设置动画使进度和水波纹变化.../** * 设置进度 * * @param currentProgress 进度 * @param duration 达到进度需要的时间 */ public void setProgress...结语 通过这个项目，主要可以学到贝塞尔曲线，也可以搭配上不同的动画，搞定产品的各种交互效果。对应的文件：HorizontalWaveProgressView.java
一、SVG 的 animation SVG animation 有五大元素，他们控制着各种不同类型的动画，分别为： set animate animateColor animateTransform animateMotion...1.1、set set 为动画元素设置延迟，此元素是SVG中最简单的动画元素，但是他并没有动画效果。...to ：动画结束的属性值。 begin ：动画延迟时间。 eg：绘制一个半径为200的圆，4秒之后，半径变为50。...cdn的地址为： https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js 3.1、创建画布 Rapheal有两种创建画布的方式： 第一种：浏览器窗口上创建画布...3.2、绘制图形 画布创建好之后，该对象自带SVG内置图形有矩形、圆形、椭圆形。
background-repeat 设置背景的重复方式，初始值为 repeat，常使用值的还有no-repeat； background-attachment 设置背景图像的位置是在视口内固定，还是随着包含它的区块滚动...更好的斜向条纹 网格 关键实现：background-image、background-size 给多个渐变设置不同的方向、大小，可以实现网格的效果。...回弹效果 上图图横轴为时间，纵轴为动画进度。图中贝塞尔曲线有两个控制手柄，x1, y1 控制第一个锚点，x2, y2控制第二个锚点。其中 x1 、x2 不能大于/小于 1，但是y1, y2 可以。...会动的背景 关键实现：animation、background-position 具体分析：将动画最后一帧的background-position设为100% 0%，动画便会将背景位置从最初的0% 0%...关键实现：animation transform-origin 具体分析：设置旋转容器的transform-origin为大圆容器中心点，同时利用两个元素在向不同方向旋转时旋转角度互相抵消的原理，实现图像沿环形路径旋转同时保持自身角度的不变
HorizontalWaveProgressView.GIF 网上垂直的水波纹进度条很多，但横向的很少，将垂直的水波纹改为水平的还遇到了些麻烦，现在完善后发布出来，希望遇到的人少躺点坑。...path的起始点为(0,0)可根据进度动态改变，然后循环画曲线，长度是有几个波浪就是多长，然后连接到view高度的位置，最后到(0，0)，形成一个封闭的区域，这样就实现了一个填充的水波效果。...secondWavePath.lineTo(0, waveActualSizeHeight); secondWavePath.close(); return secondWavePath; } 3.设置动画使进度和水波纹变化.../** * 设置进度 * * @param currentProgress 进度 * @param duration 达到进度需要的时间 */ public void setProgress...结语 通过这个项目，主要可以学到贝塞尔曲线，也可以搭配上不同的动画，搞定产品的各种交互效果。对应的文件：HorizontalWaveProgressView.java
使用不同的 Builder 来构建不同类型的对话框，这些 Builder 都拥有设置 title 和添加底部按钮的功能，不同的 Builder 特有的作用如下： MessageDialogBuilder...QMUIRadiusImageView 提供为图片添加圆角、边框、剪裁到圆形或其他形状等功能。 QMUIRoundButton 对 Button 提供圆角功能，支持以下特性： 指定圆角的大小。...分别指定不同方向的圆角大小。 指定圆角的大小为高度的一半，并跟随高度变化自适应圆角大小。 支持分别指定背景色和边框色，指定颜色时支持使用 color 或 ColorStateList。...dp 与 px 数值的相互转化。 QMUIDrawableHelper 快速绘制一张指定大小、颜色、边框的图片，支持形状为圆角矩形和圆形。 快速绘制一张带上分隔线或下分隔线的图片。...对 View 做背景颜色变化动画，支持多个动画参数。 对 View 做进退场动画，支持透明度变化和上下位移两种方式。
《卡片图添加下划线》 《卡片图添加折线趋势》 《卡片图叠加进度条》 《卡片图添加天气动画图标》 《卡片图模拟微信日周月对比》 ---- Power BI表格矩阵可以借助条件格式图标实现指标和排名组合，...2023年6月推出的卡片图可以实现类似的组合（不了解新卡片图可查看此文：Power BI可视化的巅峰之作：新卡片图），例如，指标右上角放一个排名卡片，绿色表示前三名，红色表示排名靠后： 实现的方式是卡片图插入...SVG矢量图，上方示例的排名图片度量值为： 排名图片= "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width...排名也可以放到上方，以下看上去是一种神奇的效果，排名在边框之上。 如果使用卡片图的默认边框，是无法产生这种效果的，此处实际做了一个假边框，下图外层是真实边框，内层为假边框。...假边框是我们填充了一个卡片背景图，填充方式参考此文《Power BI卡片图异形边框》。填充完成后关闭真边框，并把排名图像至于上方。
style中可以设置长宽、位置等属性，可以设置fill、stroke等相关属性； 3.fill填充 fill属性设置对象内部、以及子元素填充的颜色，值为none时无填充； fill-opacity设置填充的透明度...； fill-rule，用于定义如何给图形重叠的区域上色； 4.stroke属性 stroke：边框，即线条，设置其颜色 stroke-width：设置描边的宽度。...stroke-opacity： 边框透明度 stroke-linecap：绘制描边的方式。butt用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。...g元素是可以嵌套的， 组合起来的图形元素就和单个的元素一样，可以给id值，这样，需要的时候(例如动画和重用一组元素)只用引用这个id值就可以了， 组合一组图形元素可以统一设置这组元素的相关属性(fill...动画 搭配css3的动画，也可以使用svg专有的动画标签元素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
