效果:
实现思路:
内容是同一个容器,通过动画的效果以及改变容器的内容达到以上效果
wxml:
<view style="height: 30px;overflow: hidden;">
<view animation="{
{animationData}}">{
{content}}</view>
</view>
js:
var that
var animation = wx.createAnimation()
/**
* 传入内容,广播将会以动画播放这条内容
*/
function update(content) {
// 旧消息向上平移,以低速开始,动画时间300ms
animation.translateY(-30).step({duration:300,timingFunction: 'ease-in'})
// 为了实现下一条新内容向上平移的效果,必须把内容很快平移到下方,并且不能被用户看见
// 实现方法:动画时间设置为1ms,过渡效果设置为’动画第一帧就跳至结束状态直到结束‘
animation.opacity(0).translateY(30).step({duration:1,timingFunction:'step-start'})
// 新消息