基本用法

1.在js文件中设置animation

onLoad () {this.test();
}
test () {var animation = my.createAnimation({transformOrigin: "top right",duration: 3000,timeFunction: "ease-in-out",delay: 100,})animation.scale(3,3).rotate(60).step();this.setData({myAnimation: animation.export()});
}

在页面加载完成后会自动执行动画。如果是组件的话，要将onLoad替换为didMount。createAnimation可实现的动作很多，可以参考官方文档。

2.在axml中引入animation

<view class="testView" animation="{{myAnimation}}"></view>

使用心得

1.缺点：

1)结束后基点会重新返回中心，可能导致位置平移。

2)不论动画有几步，基点都是相对最初状态的位置，所以当基点不是中心时，旋转，缩放，改变长宽都可能产生超出预期的结果。而且根据实际操作来看，以任何非中心点为基点作动画，都只能保证起始态和最终态符合要求，而过程并不符合。

3)强烈建议不要使用非中心的基点。

2.使用 my.createAnimation 生成的动画是通过过渡（Transition）实现的，只会触发 onTransitionEnd，不会触发 onAnimationStart, onAnimationIteration, onAnimationEnd。

3.如果不更改基点等设置,直接进行下一步动画，可以在step后继续链式调用，两个step之间的所有动作会同时进行。每一步执行时间都等于设置的时间。

4.如果在一段动画后要重新定义基点等基础属性，可以对step传入与createAnimation相同的参数。
step({transformOrigin: 'center'})

注意，每个step的设置影响的是step之前那一步的动画，而且会覆盖createAnimation的基础设置。且下一个step仍然是初始设置。

5.如果确实需要新建一个animation，建议通过onTransitionEnd触发新的animation，不能重复设置，否则只会执行最后一个动画。

总结

官方提供的createAnimation()api并不是很好用，可以用来快速实现一些简单的动画。而且因为是通过transition实现的，所以我们是可以自己实现相同的效果的。千万不要修改基点位置，否则动画会变得一团糟。

[淘宝小程序]my.createAnimation()的用法与填坑相关推荐

淘宝小程序体验优化：数据分析和优化实践
作者:莫绪旻(向屿) 淘宝小程序已经走过若干个双十一,淘宝开放业务有序铺开.体验优化是个老生常谈的话题,如何让小程序跑得又稳又快,成了我们最大的挑战之一. 写在前面如何定义好的体验过去我们定义这个 ...
超详细淘宝小程序的接入开发步骤
本文是向大家介绍的关于工作中遇到的如何对接淘宝小程序开发的步骤,它能够帮助大家省略在和淘宝侧对接沟通过程中的一些繁琐问题,便捷大家直接快速开展工作~~ 一.步骤演示 1.首先我们打开淘宝开放平台,进入 ...
淘宝小程序（商家应用）开发提前需要了解的一些概念
规定:淘宝小程序即淘宝商家应用.下文中只称作淘宝小程序,二者概念一致. 一:概念和业务场景概念: 因为淘宝小程序是从支付宝小程序迁移过来的.用的同一套框架.所以你需要先通读一遍商家应用文档(淘宝小程 ...
淘宝小程序游戏迁移Laya引擎
淘宝小程序游戏迁移Laya引擎 1. 目录结构 bin -- 当前项目的输出文件 laya -- 存放UI项目 assets -- 图片,音频资源目录 pages -- .scene 场景文件 key ...
淘宝小程序还可以这么玩！私域互动实践总结
简介:小程序创意互动项目,作为淘宝购物小程序全面提升消费体验和满足商家个性化运营的重点项目之一,从 2020 年 3 月底正式 KO 到今年双11,已经经历了多次迭代.在购物小程序技术.产品.运营团队 ...
淘宝小程序的坑（持续更新）
1. 淘宝小程序 ui 组件更新缓慢(基本不更新) form组件 onFormChange 当formItem field 没有值的时候返回对应的name 为空 tab 返回的index 会加上 ...
哔哩哔哩淘宝小程序盲盒抽奖实践
目录背景名词解释整体业务流程技术实现调用链路云开发( Serverless ) 云开发的限制编写云函数怎么拿到授权查询轻店铺用户订单轻店铺云网关数字签名网关网关技术选型 Vert ...
“淘宝小程序“ 九宫格抽奖功能
淘宝小程序的九宫格抽奖功能,同理功能代码可根据指定小程序规则调整事件,此逻辑可适配所有小程序功能开发. 效果图: index.axml  <view cl ...
淘宝小程序九宫格抽奖
淘宝小程序的九宫格抽奖功能,同理功能代码可根据指定小程序规则调整事件,此逻辑可适配所有小程序功能开发. 效果图: index.axml  <view cl ...

[淘宝小程序]my.createAnimation()的用法与填坑

基本用法

使用心得

总结

[淘宝小程序]my.createAnimation()的用法与填坑相关推荐

最新文章

热门文章