从答案之书小程序，看小程序的三种动画玩法

预览

PS：本人自己写的demo，源码可以通过关注公众号「Frank的梦呓」，回复关键词「答案之书源码」获取

体验

动画解读

通过上面的gif图，我们可以看到整个流程大概涉及到这样几个动画。

• 心中默念你的问题的下落放大，长按屏幕 3 秒后解答上升放大，答案文字的下落放大
• 长按屏幕后五芒星的旋转
• 再来一次按钮的边框效果

实现

animate.css实现文字动画

1. 官网下载

2. 下载后的文件后缀名修改为.wxss，然后放到utils文件夹下

3. 修改animate.wxss

// old
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate
}

// new
page {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate
}
复制代码

4. app.wxss中引入

@import './utils/animate.wxss';
复制代码

5. wxml中使用

<!-- 第一个参数是固定，第二个参数是效果。-->

<view class="animate__animated animate__zoomInDown">
  心中默念你的问题
</view>
复制代码

实现五芒星旋转

1. 通过​wx.createAnimation

// in wxml
<view animation="{{animation}}" />


// in js

this.animation = wx.createAnimation({ // 创建动画实例
	duration: 1000
})
 
this.animation.rotate(1800).step() // 一组动画完成

this.setData({
	animation: this.animation.export() // 导出动画队列
})
复制代码

2. 通过关键帧动画this.animate

从小程序基础库2.9.0开始支持一种更友好的动画创建方式，用于代替旧的wx.createAnimation。它具有更好的性能和更可控的接口。

// in wxml
<view class="block" />


// in js
this.animate('.block', [
  { scale: [1, 1], rotate: 1800, ease: 'ease-out'  },
], 1000, function () {
  this.clearAnimation('.block', function () {
    console.log("清除了.block上的所有动画属性")
  })
}.bind(this))
复制代码

css3实现「再来一次」边框效果

// in wxml
<view class="back-btn">再试一次</view>


// in wxss
.back-btn  {
  position: relative;
  padding: 5rpx 10rpx;
  margin: auto;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border: 1rpx solid #fff;
  border-radius: 10rpx;
  background: #000;
  transition: all .3s;
}

.back-btn:hover {
  filter: contrast(1.1);
}

.back-btn:active {
  filter: contrast(0.9);
}

.back-btn::before,
.back-btn::after {
  content: "";
  position: absolute;
  top: -10rpx;
  left: -10rpx;
  right: -10rpx;
  bottom: -10rpx;
  border: 1rpx solid #fff;
  transition: all .5s;
  animation: clippath 3s infinite linear;
  border-radius: 10rpx;
}

.back-btn::after {
  animation: clippath 3s infinite -1.5s linear;
}

@keyframes clippath {
  0%,
  100% {
      clip-path: inset(0 0 98% 0);
  }
  
  25% {
      clip-path: inset(0 98% 0 0);
  }
  50% {
      clip-path: inset(98% 0 0 0);
  }
  75% {
      clip-path: inset(0 0 0 98%);
  }
}
复制代码

总结

总的来说，微信小程序是独创了一套自己的动画玩法，并且支持3种动画方案，分别是createAnimation、this.animate和CSS3动画。

PS：本人自己写的demo，源码可以通过关注公众号「Frank的梦呓」，回复关键词「答案之书源码」获取

本人开源商城项目bytemall，持续更新，欢迎大家关注。

欢迎讨论，点个赞再走吧 ｡◕‿◕｡ ～