小程序跑马灯效果

[billfeller]

demo示例通过 animation 在小程序中实现跑马灯效果。

animation.wxml

<view class="marquee-wrap">
    <view class="marquee-text" animation="{{animationData}}">
        <view class="marquee-item">测试跑马灯效果；测试跑马灯效果；</view>
        <view class="marquee-item">测试跑马灯效果；测试跑马灯效果；</view>
        <view class="marquee-item">测试跑马灯效果；测试跑马灯效果；</view>
        <view class="marquee-item">测试跑马灯效果；测试跑马灯效果；</view>
        <view class="marquee-item">测试跑马灯效果；测试跑马灯效果；</view>
    </view>
</view>

animation.wxss

.marquee-wrap {
    width: 100%;
    overflow: hidden;
}

.marquee-text {
    font-size: 11px;
    white-space: nowrap;
}

.marquee-item {
    display: inline-block;
}

animation.js

Page({
    data: {
        animationData: {}
    },
    onShow: function() {
        var animation = wx.createAnimation({
            duration: 1000,
            timingFunction: 'linear',
        })

        this.animation = animation

        animation.step()
        this.setData({
            animationData: animation.export()
        })

        var i = 0;
        setInterval(function() {
            i++
            animation.translate(-i * 1).step()
            this.setData({
                animationData: animation.export()
            })
        }.bind(this), 10)
    }
})