美文网首页
前端—动画

前端—动画

作者: Taoqi思 | 来源:发表于2018-11-07 18:30 被阅读0次

常用方法:

animation.play(); // 播放该动画,从目前停止的帧开始播放
animation.stop(); // 停止播放该动画,回到第0帧
animation.pause(); // 暂停该动画,在当前帧停止并保持
animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放
animation.goToAndStop(30, true); // 跳转到第30帧并停止
animation.goToAndPlay(300); // 跳转到第300毫秒并播放
animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组,forceFlag表示是否立即强制播放该片段
animation.playSegments([10,20], false); // 播放完之前的片段,播放10-20帧
animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧
animation.setSpeed(speed); // 设置播放速度,speed为1表示正常速度
animation.setDirection(direction); // 设置播放方向,1表示正向播放,-1表示反向播放
animation.destroy(); // 删除该动画,移除相应的元素标签等。在unmount的时候,需要调用该方法

优点:

1.可以实现较为复杂动画
2.可以导出canvas,性能高。也可以在部分小图标上导出svg,灵活性高。
3.方便控制启停,可以控制回调
4.大大解放前端生产力

相关文章

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

  • 前端(动画)

    变形中心 背面可见 图片翻面 animation动画 人物走路动画 多帧动画 loading动画

  • 前端(动画)

    变形中心点 背面可见 图片翻面 animation动画 多帧动画 今天小练习 loading动画

  • 前端(动画)

    鼠标移动前 效果: 鼠标移动后 效果:

  • 前端 动画

    css3过渡动画 border-radius 设置元素变成圆角transition 设置动画 4个属性ease 慢...

  • 前端—动画

    常用方法: animation.play(); // 播放该动画,从目前停止的帧开始播放animation.sto...

  • 前端——动画

    CSS3 border-radius设置圆角 box-shadow设置阴影 transition动画 transi...

  • 前端动画

    几个基本概念 简单介绍几个关于动画的基本概念: 帧:在动画过程中,每一幅静止画面即为一“帧”;帧率:即每秒钟播放的...

  • 前端资源推荐-第0天

    第0期 骨骼动画原理与前端实现浅谈 骨骼动画原理,前端一些动画的实现的方式,主要思想其实就是分解,然后相对运动,附...

  • 前端动效讲解与实战

    作者:vivo 互联网前端团队- ZhaoJie 本文将从各个角度来对动画整个体系进行分类,并且介绍各种前端动画的...

网友评论

      本文标题:前端—动画

      本文链接:https://www.haomeiwen.com/subject/dutbxqtx.html