微信小程序js动画Animation基本使用

最近才发现j小程序js中自带Animation动画功能

先在 .js 中使用wx.createAnimation创建动画

基本属性文档中很清楚

定义动画对象后就可以.加需要的动画效果了，这里要注意==step()==是一定要写的，表示动画制作完成，不写是没有效果的

然后在wxml中调用就可以了

下面是上面gif动画的代码

.wxml

<button bindtap="showItem">点击翻页</button><view class="fanye" animation="{{animationData}}"></view>

.wxss

button{z-index: 10;
}
.fanye{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;background: rgba(83, 33, 33);  z-index: 5;opacity: 0;
}

.js

// pages/fanye/fanye.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},showItem() {let animation = wx.createAnimation({duration: 800,});animation.translateX(300).opacity(0.3).step();this.setData({show: !this.data.show,animationData: animation.export()});// 移动完成后setTimeout(()=>{var animation = wx.createAnimation({duration: 100,});animation.translateX(0).opacity(0).step()this.setData({animationData:animation.export()})},500)},})

微信小程序js动画Animation基本使用相关推荐

微信小程序js过度动画
微信小程序js过度动画如有错误还请大神指教.如果觉得不错可以关注我了解更多. 一,我们先来看看效果吧. 二,我们用的是js的逐帧动画,css也可有相同的效果,我们这里用js // pages/arr ...
【微信小程序】动画实现字幕滚动
需求: 实现框内的文字自下而上的自动循环滚动. 解决方案: demo:https://github.com/yapeee/wx-text-rolling-demo 第一种方法: 经查询,最一开始实现字 ...
微信小程序的动画效果@keyframes
微信小程序的动画效果@keyframes 定义动画的格式: @keyframes 动画名称{ 阶段1{css样式} 阶段2{css样式} 阶段3{css样式} } 每个阶段用百分比表示,即从0%到1 ...
【Note】微信小程序js使用农历(一行代码)
[Note]微信小程序js使用农历 0 直接输出 var data_ = new Date('2022/10/27 00:00:00') console.log(data_.toLocaleStrin ...
微信小程序js把数字转化成字母
微信小程序 js 把数字转化成字母微信小程序 js 把数字转化成字母 for (let i = 0; i < 26; i++) {list[i] = {};list[i].name = Str ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
微信小程序JS字符串操作方法汇总
微信小程序JS字符串操作方法汇总 JS对字符串进行切割截取 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子: str="jpg|bmp|gif|ico| ...
微信小程序JS字符串操作方法汇总，包含切割截取split，合并字符串join，连接字符串concat，返回指定字符串charAt，提取字符串substring等
微信小程序JS字符串操作方法汇总 JS对字符串进行切割截取 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子: str="jpg|bmp|gif|ico| ...
微信小程序js 字符串截取
微信小程序js 字符串截取 console.log(time) 输出:qwertyuiop console.log(time.substring(0, 5)) 输出:qwert

微信小程序js动画Animation基本使用

微信小程序js动画Animation基本使用相关推荐

最新文章

热门文章