用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 查看内容

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

Rolan 2021-5-24 00:57

预览PS:本人自己写的demo,源码可以通过关注公众号「Frank的梦呓」,回复关键词「答案之书源码」获取体验动画解读通过上面的gif图,我们可以看到整个流程大概涉及到这样几个动画。心中默念你的问题的下落放大,长按 ...

预览

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 ,持续更新,欢迎大家关注。

欢迎讨论,点个赞再走吧

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 三言 来自: 掘金