1、因为网络问题,网速过慢,举春启无法将小程序内的动感相册,进行发布朋友森首圈和分享,需要更换网络。
2、动感相册内的内容过于敏感,需要重新检查动感相册内的内容,正如是否有违规的照片。
简单总结一下微信动画的实现指答及执行步骤。
实现方备拦式官方文档是这样说的:
①创建一个动画实例 animation。
②调用实例的方法来描述动画。
③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性 ...
注意:
前两步是定义一个动画并设置都要干什么,然后把这个设置好的“规则”扔给界面上的某个元素,让它按照这个规则执行。
当然如果有多个元素的animation="{{ani}}",也都会执行这个动画规则。
简单介绍一下例子中的几个参数和方法(其他的详见官方文档):
首先需要定义一套关键帧,关键帧的定义方式比较特殊,它使用了关键字@keyframes来定义动画。这里可以用from{}to{}或者用百分比充当时间点。具体格式为:
然后,在需要设置动画的相应的标签里,调用动画就可以了
比如需要给div添加动画效果:
div{
animation:1s 2s 动画名称 运动方式 动画执行的次数
}
详细分析:
首先 wxml 中 pupContent 初始化信息为高度为0 display: 为 noneclick 为 false
, click 这个来判断 display: 为 block 还是为 none (即: block 为换行显示, none 为不显示,把视图隐藏了) option 用来判断是否调用打开的动画,或者关闭的动画
第一次点击 click 变为 true option 变为 true 这时候 pupContent 的 display: 为 block 高度由动画变为 800rpx
第二次唯滚慧点击阴影部分 首先设置了 option 为 false option 为 false 的话先走的动画是 pupContent 由 800 的高度变为 0 .然后在设置click为false就隐藏掉了
小程序和html页面有点不同,主要是使用js来实现动画效果,因为小程序自身有提供一种改孝察方式:wx.createAnimation(OBJECT),它创建一个动画实例 animation ,通过调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性,step()来停止动画,step() 表示一组动画完成。
我们主要用wx:createAnimation({})来设置一些参数,例如持续时间、延时、加载方式等,用export()来开启动画,在页面上调用animation=”{{动画名称}}”。具体步骤:
1)创建动画对象并设置有效参数==>wx:createAnimation({参核茄数:有效值})
2)创建一组动画,调用step()来表示一组动画的完成==>动画对象.动画效果.step()
3)在data中设置一个对象vip_animal(自己随意慎瞎命名),用该对象开启动画==>this.setData({vip_animal: animation.export()})
4)在页面上调用动画对象==>animation="{{vip_animal}}"
例子:淡入淡出动画效果(当淡入动画生效后1.5s,淡出动画开始生效)
在wxml上调用animation="{{vip_animal}}"来显示
如果需要设置循环效果。我们可以设置:(setAnimation为)
另一种方式:
在wxml上调用style="{{style_img}}"来显示
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)