小程序 多个animation

萌新又来提问啦!

最近在用小程序实现一个app的新手引导动画时发现了这样一个问题:在添加多个动画时最后一个添加进animation动画的元素会包含之前添加的动画效果,比如有这样一段代码:

<imageclass="meeting-left"animation="{{animationMBL}}"src="../../images/animation4/a4-3.png"/>

<imageclass="meeting-right"animation="{{animationMBR}}"src="../../images/animation4/a4-4.png"/>

meeting-right的动画是在meeting-left的动画之后,结果拥有meeting-right类的元素就会把meeting-left元素的动画效果也一并作了,

在开发者工具里查看是这样的:

可以看到meeting-right既包含了translateX(240px)(这个其实是meeting-left的动画效果)也包含了translateX(0px,-251px)的动画效果(只有这个才是meeting-right该有的动画),我动画部分的代码是这样写的:

然后为了解决这个问题,我注册了两个变量,animation1,animation2,让后分别给这两个变量添加动画,页面上的元素就可以只做自己的动画了,代码如下

再然后我就想请问下为什么我的第一个方法没有奏效呢?代码什么地方写的有问题?感谢大家!(最后顺便再问下添加多个动画的step()在官方文档里写的在iOS/Android6.3.30版本的时候会有只执行第一步的bug 为啥现在都到了6.5.2了还是不行呢)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
小程序animation可以实现各种头像效果,以下是其中几种常见的头像动画效果: 1. 缩放效果:可以通过animation.scale()方法实现头像的放大缩小效果。可以设置from的scale值为1,to的scale值为0.5,duration为500ms,来实现一个缩小的效果。当用户点击头像时,可以触发这个animation,让头像以一定的动画效果变小,从而给用户一种点击的反馈。 2. 旋转效果:可以通过animation.rotate()方法实现头像的旋转效果。可以设置from的rotate值为0,to的rotate值为360,duration为1000ms,实现一个头像的旋转动画效果。可以将这个animation添加到头像上,让头像在显示的时候进行旋转动画。 3. 淡入淡出效果:可以通过animation.opacity()方法实现头像的淡入淡出效果。可以设置from的opacity值为0,to的opacity值为1,duration为500ms,实现一个从透明到不透明的渐显效果。当头像需要显示时,可以通过这个animation实现一个淡入的效果,让头像逐渐出现在用户面前。 4. 弹跳效果:可以通过animation.translate()方法实现头像的弹跳效果。可以设置from的translateY值为0,to的translateY值为-30,duration为300ms,实现一个向上弹跳的效果。当用户触摸头像时,可以触发这个animation,让头像在用户的操作下向上弹跳一段距离,然后由于重力的作用再回到原位。 除了上述的几种常见的头像动画效果,开发者还可以结合自己的需求和想法,利用小程序animation的丰富的api来实现更多种类的头像效果,以增加用户的使用体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无名小码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值