微信小程式實作背景圖流動動畫

執行個體簡介

本例分享兩個實作背景圖流動動畫的方法：

1、利用元件swiper實作；

2、利用css動畫實作。

功能實作

1、利用元件swiper實作

01 wxml代碼

<swiper class="bg-box" autoplay='true' circular='true' interval='{{time}}' duration='{{time}}' easing-function='linear' vertical='true'>
  <swiper-item wx:for="{{photolist}}" wx:key="key" wx:for-item="item">
    <image style="height: 100%; width: 100%;" src="{{item.pic}}"></image>
  </swiper-item>
</swiper>
<view class="mask"></view>
<view class="box"></view>           

02 wxss代碼

.bg-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mask {
  position: absolute;
  top: 300rpx;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: 1;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.box {
  margin: 200rpx auto 0;
  width: 500rpx;
  height: 800rpx;
  background-color: #fff;
  position: relative;
  z-index: 1;
  border-radius: 10rpx;
}           

03 js代碼，原理是利用swiper對兩張一樣的圖檔進行無限循環播放，進而實作流動動畫效果

Page({
  /**
   * 頁面的初始資料
   */
  data: {
    time: 4000, // 動畫切換時間
    photolist: [{
        pic: "../../images/bg.jpg",
      },
      {
        pic: "../../images/bg.jpg",
      },
    ]
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    wx.showLoading({
      title: '加載資料中....'
    })
    setTimeout(function () {
      wx.hideLoading()
    }, this.data.time);
  },
})           

2、利用css動畫實作

01 wxml代碼

<view class="bg-box">
  <image src="../../images/bg.jpg" class="bg-img"></image>
  <image src="../../images/bg.jpg" class="bg-img"></image>
</view>
<view class="mask"></view>
<view class="box"></view>           

02 wxss代碼，原理是利用@keyframes對兩張一樣的圖檔進行無限循環播放，進而實作流動動畫效果

.bg-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
}

.bg-img {
  width: 100%;
  height: 100%;
  animation: bg-animate 5s linear infinite;
}

.bg-img:not(:first-child) {
  margin-top: -1px;
}

@keyframes bg-animate {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

.mask {
  position: absolute;
  top: 300rpx;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: 1;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.box {
  margin: 200rpx auto 0;
  width: 500rpx;
  height: 800rpx;
  background-color: #fff;
  position: relative;
  z-index: 1;
  border-radius: 10rpx;
}           

03 js代碼

Page({
  /**
   * 頁面的初始資料
   */
  data: {},
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {}
})