网站favicon图标制作 微信商家收款 软件开发 智慧树 function count jboss photoshop视频教程全集下载 jq遍历 jquery延时 web前端毕业设计题目 spark文档 css鼠标悬浮样式 matlab图像滤波 python爬虫包 php获取当天的0点时间戳 python3正则表达式 python的str python命令 python循环10次 python自定义异常 java语法 java中continue java怎么编译 linux磁盘管理 php实例教程 登录界面html 深渊碎片 明解c语言 平面设计软件下载 珊瑚版 计算机科学概论 黑道圣徒4去马赛克补丁 0000008e 微信群群发软件 日文游戏乱码转换工具 ps尺子的快捷键 图片格式太大怎么变小 dnf女柔道加点 输入法修复
当前位置: 首页 > 学习教程  > 编程语言

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

2020/12/5 9:37:59 文章标签:

最近才发现j小程序js中自带Animation动画功能 先在 .js 中使用wx.createAnimation创建动画 基本属性文档中很清楚 定义动画对象后就可以.加需要的动画效果了,这里要注意step()是一定要写的,表示动画制作完成,不写是没有效果的 然后在wxml中…

最近才发现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)
  },

})

本文链接: http://www.dtmao.cc/news_show_450035.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?