微信小程序 animation API
来源:互联网 发布:erp软件好学吗 编辑:程序博客网 时间:2024/06/05 19:41
动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入。
wx.createAnimation(object)
看官方介绍
1.创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
2.调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的属性
这还是比较好理解的比如第一条对应代码animation: this.animation.export()
第二条比如缩放动画,也就说是一组scale,scaleX, scaleY…为一缩放动画组的一个动画方法,缩放动画组和旋转动画组通过step()链接,按顺序执行。代码中体验吧!看效果反过来看会更容易理解
主要属性:
这里主要树下timingFunction和transformOrigin
timingFunction 设置动画效果
- linear 默认为linear 动画一直较为均匀
- ease 开始时缓慢中间加速到快结束时减速
- ease-in 开始的时候缓慢
- ease-in-out 开始和结束时减速
- ease-out 结束时减速
- step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
- step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
transformOrigin 设置动画的基点 默认%50 %50 0
- left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%
- top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%
动画组及动画方法
样式:
旋转:
缩放:
偏移:
倾斜:
矩阵变形:
演示单个动画组效果
wxml
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
js
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
演示多个动画组效果
这里我们只需要更改以下代码即可
0 0
- 微信小程序 animation API
- 微信小程序 animation API
- 微信小程序把玩(四十)animation API
- 微信小程序开发—(十七)animation API
- 微信小程序开发—(十七)animation API(2)
- Animation API
- 微信小程序开发之animation动画实现
- 微信小程序开发animation心跳动画
- 微信小程序开发效果:animation心跳动画
- 微信小程序开发效果:animation心跳动画
- Uni2D 入门 -- Animation Clip 和 Animation API
- Uni2D 入门 -- Animation Clip 和 Animation API
- Uni2D 入门 -- Animation Clip 和 Animation API
- Uni2D 入门 -- Animation Clip 和 Animation API
- Uni2D 入门 -- Animation Clip 和 Animation API
- 微信小程序 Image API
- 微信小程序 Audio API
- 微信小程序 Video API
- 4.Nodejs入门-----MongoDB
- 测试2
- [Azure]使用Powershell输出Azure订阅下所有虚拟机的ACL信息
- SVN和Maven的区别
- 织梦系统(DEDECMS)后台模板修改2
- 微信小程序 animation API
- Oracle操作命令大全(备查)
- CSS干货系列(四)超链接和列表
- 微信小程序 canvas API
- javaWEB总结(16):jsp错误页面的处理
- Linux&&Android命令
- Fragment在生命周期中是如何走到onCreateView的(一)
- 织梦系统(DEDECMS)后台模板修改3
- 微信小程序实战 《跨时空》旅行日记小程序