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

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

技术杂谈小彩虹2021-08-24 2:19:45300A+A-

预览

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

体验

gh_e7387e3aeeab_258.jpg

动画解读

通过上面的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种动画方案,分别是createAnimationthis.animateCSS3动画。

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

本人开源商城项目bytemall体验一下,持续更新,欢迎大家关注。

欢迎讨论,点个赞再走吧 。◕‿◕。 ~

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们