小程序动画插件--渐变效果 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

小程序动画插件--渐变效果

发表时间:2022-9-14

发布人:葵宇科技

浏览次数:15

小程序动画插件,更方便地将所需的动画css注入到对应的元素中,使动画逻辑更可控

动画类型:

  • Animation 单元素动画 只控制一个元素
  • AnimationGroup 多元素 延迟,动画
  • AnimationAssign 指定多元素中其中一个元素动画

导入

import {Animation, AnimationGroup, AnimationAssign} from '../../Animation/Animation';

wxml 中添加

    //Animation
    

    //AnimationGroup
    
      {{item}}
    

    // AnimationAssign
    
      {{item}}
    

css 中添加

    .fadeOutToButton-enter{
      opacity: 0.01;
      transform: translateY(-50%);
    }

    .fadeOutToButton-enter.fadeOutToButton-enter-active{
      opacity: 1;
      transform: translateY(0);
      transition: all 1000ms ease-in;
    }


    .fadeOutToButton-exit{
      opacity: 1;
      transform: translateY(0);
    }

    .fadeOutToButton-exit.fadeOutToButton-exit-active{
      opacity: 0.01;
      transform: translateY(50%);
      transition: all 1000ms ease-in;
    }

初始化 在onLoad 函数中:

  onLoad:function(options){


    //Animation
    this.fadeOutToButton =  new Animation(this,{
      className: 'fadeOutToButton', // 写在css的样式名
      animationName: 'fade',  // 填写在html中的变量名
      timeOut: 1000, //动画时间 和动画持续时间同步
      // delayTime: 1000,  // 延迟时间
    })

    //AnimationGroup
    this.fadeArr = new AnimationGroup(this,{
      className: 'fadeOutToButton', // 写在css的样式名
      animationName: 'fadeArr',  // 填写在html中的变量名
      timeOut: 1000, //动画时间 和动画持续时间同步
      // delayTime: 1000,  // 延迟时间
      interval: 200,
    })

    //AnimationAssign
    this.removeAnimation = new AnimationAssign(this,{
      className: 'fadeOutToButton',
      animationName: 'fadeArr',
      timeOut:1000,
    })


  },

调用 在 onShow 函数中: (当元素一开始存在时)

    onShow: function () {
      this.fadeOutToButton.in()
    },

当元素开始并不存在 (会先显示元素之前先添加上 enter类)

    // 可传入延迟时间 毫秒 不填会根据构造时的延迟时间来控制
    this.fadeOutToButton.in(1000).then(()=>{
      this.setData({
        boxShow: true,
      })
    })

消除元素 (会先元素消失之后在消失元素)

    this.fadeOutToButton.out().then(()=>{
      this.setData({
        boxShow: false,
      })
    })

相关案例查看更多