# WEB

### JS动画
> element.animate( keyframes, AnimationEffectTimingProperties ); 
```

var ani=document.getElementById("elementId").animate(
    [
        { transform: 'rotate(0)', color: '#000' },
        { transform: 'rotate(360deg)', color: '#fff' }
    ], 
    {
        duration: 3000,
        iterations: Infinity
    }
);

//建一个轮播图滑动动画的关键帧对象数组
var slidingLeft = [
    //通过 margin-left 和 opacity的渐变来实现简单滑动
    { marginLeft: '0px', opacity: 1 },
    { opacity: 0.6, offset: 0.7 },
    { marginLeft: "-5rem", opacity: 1 }
];

//var slidingLeft={opacity: [ 1, 0 ]}

//Web 动画 API 和 CSS3 动画的区别：
//WAAPI 不需要明确地告知每个关键帧出现的时刻在动画中的百分比，它将根据您给出的关键帧数量自动将动画划分为相等的部分。当我们想要明确地设置一个关键帧与其他关键帧的偏移量时，
//我们可以直接在对象中指定一个偏移量( offset：大小范围是 0 ~ 1 )。
//WAAPI 的关键帧对象中，需要使用元素属性的驼峰写法，例如对应 CSS 的属性 "margin-Left" , WAAPI 的关键帧对象要使用 "marginLeft" 。
//WAAPI 必须至少指定两个关键帧( 表示动画序列的开始和结束状态 )。如果您的关键帧对象数组只有一个对象成员, Element.animate() 将抛出不支持的异常报错。


ani对象有下面这些属性
currentTime
动画的当前时间值，以毫秒为单位。如果缺少 timeline，则其值为 null，即表示动画不活动或尚未播放。
effect
动画的目标效果。可以是基于 AnimationEffectReadOnly 的类型的效果对象，例如 KeyframeEffect 或 null 。
finished
只读。返回此动画完成后执行的 Promise 对象。
id
标识动画的字符串。
playState
只读。动画的播放状态，常见的有 running, paused, finished 。
playbackRate
动画的播放速度，默认值为 1。当值为 0.5 时动画会减慢一半，当值为负值时动画会反向播放
ready
只读。返回当前动画准备好播放时执行的 Promise 对象。
startTime
动画播放开始时的预定时间。默认为 null。可以更改此值以使动画在不同的时间开始。
timeline
与当前动画相关联的时间轴。默认与文档的时间轴相同。

ani对象有下面方法
cancel()
清除由此动画造成的所有关键帧效果，并中止其播放。
finish()
将当前播放时间设置为与当前播放方向相对应的动画结束时间。若为正常播放，则把当前播放时间设置为动画总时长；若为反向播放则把当前播放时间设置为0。
pause()
暂停播放动画
play()
开始或继续播放动画。如果动画已完成，则再次开始播放动画。
reverse()
将动画的播放方向反转。如果在未播放的动画上调用，动画将从结尾向开头反向播放。 如果对暂停中的动画进行了调用，动画将向反方向继续播放。同样的效果可以通过设置 playbackRate *= -1; 来实现

ani对象有下面回调，也可用属性里的promise方式
oncancel ：定义动画被取消时或执行 cancel() 时触发的回调函数。
onfinish ：定义动画自然完成播放时或执行finish() 时触发的回调函数。


```