跳至主要內容
Canvas 基本动画

Canvas 基本动画

动画的基本步骤

  • 清空 canvas : 如果存在绘制的内容会完全清空 canvas (例如:背景图),否则需要清空所有。最简单的做法是使用 cleanRect() 方法。
  • 保存 canvas 状态 : 如果一些设置(样式、变形之类的)会改变 canvas 状态,而在画每一帧的时候是原始状态,则需要使用 save() 方法先保存一下。
  • 绘制动画图形(animated shapes) : 重绘动画帧。
  • 恢复 canvas 状态 : 如果已经保存了 canvas 的状态,可以先恢复它,然后重绘下一帧。

Mr.LRHCanvasCanvas动画大约 6 分钟
H5 直播点赞动画

H5 直播点赞动画

CSS3 方式

CSS3 animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  • name : animation-name , 规定需要绑定到选择器的 @keyframe (规定动画) 名称。
  • duration : animation-duration , 规定完成动画所花费的时间,以秒或毫秒计。
  • timing-function : animation-timing-function , 规定动画的速度曲线。
    • linear : 动画从头到尾的速度是相同的。
    • ease : 默认。动画以低速开始,然后加快,在结束前变慢。
    • ease-in : 动画以低速开始。
    • ease-out : 动画以低速结束。
    • ease-in-out : 动画以低速开始和结束。
    • cubic-bezier(n,n,n,n) : 在 cubic-bezier 函数中自己的值。可能的值是从 01 的数值。
  • delay : animation-delay , 规定在动画开始之前的延迟。单位可以是秒(s)或毫秒(ms)。
  • iteration-count : animation-iteration-count , 规定动画应该播放的次数。
    • n : 一个数字,定义应该播放多少次动画。
    • infinite : 指定动画应该播放无限次(永远)。
  • direction : animation-direction , 规定是否应该轮流反向播放动画。
    • normal : 默认值。动画按正常播放。
    • reverse : 动画反向播放。
    • alternate : 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
    • alternate-reverse : 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。
    • initial : 设置该属性为它的默认值。
    • inherit : 从父元素继承该属性。
  • fill-mode : animation-fill-mode , 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
    • none : 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
    • forwards : 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。
    • backwards : 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-directionnormalalternate 时)或 to 关键帧中的值(当 animation-directionreversealternate-reverse 时)。
    • both : 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
    • initial : 设置该属性为它的默认值。请参阅 initial。
    • inherit : 从父元素继承该属性。请参阅 inherit。
  • play-state : animation-play-state , 指定动画是否正在运行或已暂停。
    • paused : 指定暂停动画
    • running : 指定正在运行的动画

Mr.LRH动效动画大约 3 分钟
SVG 动画

SVG 动画

描边动画

描边动画原理

SVG 描边动画主要与以下 3 个属性相关。

  • stroke="<paint>" : 定义图形元素的外轮廓的颜色。它的默认值是 none
  • stroke-dasharray="<dasharray>" : 控制用来描边的点划线的图案范式。
    • <dasharray> : 它是一个 <length><percentage> 数列,数与数之间用逗号或者空白隔开,指定短划线缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。因此,5,3,2 等同于 5,3,2,5,3,2
  • stroke-dashoffset="<percentage> | <length> | inherit" : 指定了 dash 模式到路径开始的距离。如果使用了一个百分比值,那么这个值就代表了当前 viewport(视口) 的一个百分比。

Mr.LRHSVGSVG动画大约 16 分钟
SVG 基础

SVG 基础

可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用于描述二维的矢量图形,基于 XML 的标记语言。作为一个基于文本的开放网络标准,SVG 能够优雅而简洁地渲染不同大小的图形,并和 CSS,DOM,JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上,SVG 相对于图像,就好比 HTML 相对于文本。

容器

<svg> 元素

svg 元素可以用于在当前文档(比如说,一个 HTML 文档)内嵌套一个独立的 svg 片段。 这个独立片段拥有独立的视口和坐标系统。


Mr.LRHSVGSVG动画大约 11 分钟