Small program animation realizes the running lantern and animation object

  The effect of running lantern is a common requirement in development

For example, website notification 、 Winning notice 、 Notice 、 Gift giving notice, etc

The following code , Animated objects using applets Animation, The running lantern effect achieved ：

<button bindtap="start"> Start the animation </button>
<view class='marquee_container'>
  <image class="gift-img" src="{
   {currentLogs.gift.pic}}" mode="widthFix"></image>
  <view class="marquee_main">
    <view id="marquee_wrap" class='marquee_text' animation="{
   {ani}}" bindtransitionend="animationend">
      <text>{
   {currentLogs.from.name}} Give </text>
      <view>LV{
   {currentLogs.userLevel}}</view>
      <text>{
   {currentLogs.to.name}}</text>
      <text>{
   {currentLogs.gift.name}}</text>
      <text>{
   {'X' + currentLogs.num}}</text>
      <view> Popularity value ：{
   {currentLogs.charm}}</view>
    </view>
  </view>
</view>

Page({
  data: {
    ani: "",
    length: 0, //  Width of animation content area 
    currentLogs: {
      charm: 10,
      from: {
        name: " Wu Yanzu ",
      },
      gift: {
        name: " The roses ",
        pic: "https://avatar-img.wuhan716.com/voice/gift_rose.png",
      },
      num: 1,
      to: {
        name: " peng ",
      },
      userLevel: 4,
    },
  },

  start() {
    wx.nextTick(() => {
      this.dynamicLength().then(() => {
        setTimeout(() => {
          this.startAni();
        }, 1000);
      });
    });
  },

  //  Get content area width 
  dynamicLength() {
    return new Promise((resolve) => {
      const that = this;
      const query = wx.createSelectorQuery().in(this);
      query
        .select("#marquee_wrap")
        .boundingClientRect((rect) => {
          that.setData(
            {
              length: rect.width,
            },
            resolve()
          );
        })
        .exec();
    });
  },

  //  Start the animation 
  startAni() {
    const { length } = this.data;
    const duration = Math.round(length) * 16;
    const animation = wx.createAnimation({
      duration,
      timingFunction: "linear",
      delay: 0,
    });
    animation.translateX(-length).step();
    this.setData({
      ani: animation.export(),
    });
  },

  //  Call... At the end of the animation 
  animationend() {
    const animation = wx.createAnimation({
      duration: 0,
      timingFunction: "linear",
      delay: 0,
    });
    animation.translateX(375).step();
    this.setData({
      ani: animation.export(),
    });
  },
});

.marquee_container {
  position: relative;
  top: 50rpx;
  left: 0;
  width: 100%;
  height: 57rpx;
  padding-left: 120rpx;
}

.marquee_main{
  position: relative;  
  width: 630rpx;
  height: 57rpx;
  overflow: hidden;
  font-size: 28rpx;
  background: cyan;
}

.marquee_text {
  height: 57rpx;
  position: absolute;
  white-space: nowrap;
  top: 0;
  transform: translateX(750rpx);
  display: flex;
  align-items: center;
}

.gift-img {
  width: 120rpx;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}