06月16, 2017

动画小结

动画本质:采用定时器改变显示元素的一些属性的过程。

待续

动画的种类

JavaScript动画

DOM动画

Canvas动画

CSS3动画

transition

animation

SVG动画

block.addEventListener("click",function(){
      var self = this;
      requestAnimationFrame( function change(){
        self.style.transform = "rotate(" + (deg++) +"deg)";
        requestAnimationFrame(change);
      });
    });
时间 增量
幅度控制 ✔️ ✔️
时间控制 ✔️
速度控制 ✔️ ✔️
不会延迟 ✔️
不会掉帧 ✔️

SVG

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

但是在UC和QQ浏览器上不支持。

先来了解两个属性 stroke-dasharraystroke-dashoffset

属性 stroke-dasharray 可控制用来描边的点划线的图案范式。作为一个外观属性,它也可以直接用作一个CSS样式表内部的属性。

值 none | | inherit

它是一个数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。

stroke-dashoffset 属性指定了dash模式到路径开始的距离,如果使用了一个 <百分比> 值, 那么这个值就代表了当前viewport的一个百分比。值可以取为负值。

##CSS3动画属性

transform(v.变形)

属性: 旋转 rotate (中心为原点) 扭曲、倾斜 skew(skew(x,y),skewX(x),skewY(y)) 缩放 scale(scale(x,y),scaleX(x),scaleY(y)) 移动 translate(translateX,translateY) 矩阵变形 matrix

备注:以下demo中的 div 的初始状态为: demo origin

rotate 的用法

rotate(a) a单位为deg,可以通过 transform-origin来指定旋转的中心点,默认值为 50% 50% 0

transform: rotate(30deg);

rotate用法

transform: rotate(30deg);
transform-origin: 0 0;

rotate用法

/* 单值语法 */
transform-origin: 2px;
transform-origin: bottom;

/* 双值语法 */
/* 用两个数字值先水平后垂直,用一个数值一关键字或两关键字不强求顺序 */
transform-origin: 3cm 2px;   /* x-offset y-offset */
transform-origin: 2px left;  /* y-offset x-offset-keyword */
transform-origin: left 2px;  /* x-offset-keyword y-offset */
transform-origin: right top; /* x-offset-keyword y-offset-keyword */
transform-origin: top right; /* y-offset-keyword x-offset-keyword */

/* 三值语法 */
transform-origin: 2px 30% 10px;     /* x-offset y-offset z-offset */
transform-origin: 2px left 10px;    /* y-offset x-offset-keyword z-offset */
transform-origin: left 5px -3px;    /* x-offset-keyword y-offset z-offset */
transform-origin: right bottom 2cm; /* x-offset-keyword y-offset-keyword z-offset */
transform-origin: bottom right 2cm; /* y-offset-keyword x-offset-keyword z-offset */

skew 的用法,倾斜 transform: skew(30deg); 等同于 transform: skewX(30deg); skewX用法

transform: skewY(30deg); skewY用法

scale(sx) 的用法,比例;当坐标值处于区间 [-1, 1] 之外时,该变换将在相应的坐标方向上放大该元素,当处在区间之中时,该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理,当为负数时,将进行像素点反射之后再进行大小的修改。

1497441658537.png

transform: scale(1.1);

scale用法

transform: scale(-0.5);

1497441531738.png

translate的用法,变动,位移;下图,向右下各移动10px。

transform: translate(15px,15px);

1497441867848.png

整合起来的效果

-webkit-transform: rotate(10deg) skew(-10deg) scale(0.8) translate(100px,0);
-moz-transform: rotate(10deg) skew(-10deg) scale(0.8) translate(100px,0);
transform: rotate(10deg) skew(-10deg) scale(0.8) translate(100px,0);

1497442234372.png

transition(转换)

css的transition允许css的属性值在一定的时间区间内平滑地过渡。

属性 transition-property 指定当元素其中一个属性改变时执行transition效果。

* none(没有属性改变):transition马上停止执行
* all(所有属性改变):任何属性值变化时都将执行transition效果
* width(元素属性名):指定元素的某一个属性值

transition-duration 指定元素转换过程的持续时间,以秒或毫秒计 transition-timing-function

描述 效果等同于
linear 规定以相同速度开始至结束的过渡效果 cubic-bezier(0,0,1,1)
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果 cubic-bezier(0.25,0.1,0.25,1)
ease-in 规定以慢速开始的过渡效果 cubic-bezier(0.42,0,1,1)
ease-out 规定以慢速结束的过渡效果 cubic-bezier(0,0,0.58,1)
ease-in-out 规定以慢速开始和结束的过渡效果 cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。n∈[0,1] cubic-bezier(n,n,n,n)

1497443486998.png

transition-delay 延迟,指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果。

综合起来:

transition: background 0.5s ease-in,color 0.3s ease-out;
transition: transform .4s ease-in-out;

点这里➡️ 看个demo

animation(动画)

CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。 通过 @keyframes 规则来定义具体的动画效果,以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。

属性

animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

本文链接:http://westpsk.com/post/motion.html

-- EOF --

Comments