本文作者:DurkBlue

谈一谈小程序中css播放按钮动画的实现

DurkBlue5个月前 ( 12-03 )207抢沙发
谈一谈小程序中css播放按钮动画的实现摘要: 实现功能:把播放按钮动画封装成一个自定义组件,可以多处调用此组件component部分:index.wxml<view class="frame_wrap"...

实现功能:把播放按钮动画封装成一个自定义组件,可以多处调用此组件
component部分:

index.wxml


<view class="frame_wrap" style="background-image: url({{url}});--width:{{width}}rpx;--height:{{height}}rpx;--count:{{count}};--duration:{{duration}};"></view>


index.wxss


.frame_wrap {

    width: var(--width);

    height: var(--height);

    animation: frames calc(var(--duration) * 1s) steps(var(--count)) infinite;

    background-position: 0 0;

    background-size: calc(var(--width) * var(--count)) var(--height);

  }

  

  @keyframes frames {

    from {

      background-position-x: 0;

    }

  

    to {

      background-position-x: calc(var(--width) *-1 *var(--count));

    }

  }



index.js


Component({

  properties: {

    url: {

      type: String,

      value: ""

    },

    count: {

      type: String,

      value: 3

    },

    width:{

      type:String,

      value:360

    },

    height:{

      type:String,

      value:300

    },

    duration:{

      type: String,

      value: 0.3

    },

  },

  data: {


  },

  methods: {


  }

})



index.json


{

  "component": true,

  "usingComponents": {}

}


调用component:
index.wxml



<animation wx:if="{{isplay}}id="animationwidth="41height="40count="3duration="3"
              url="https://api.hopels.com/ui/DurkBlue/images/words/players-lundu.png"></animation>


index.js


Page({    onReady: function () { /**生命周期函数--监听页面初次渲染完成 *///获得dialog组件      this.animation= this.selectComponent("#animation");  },});


index.json


{  "usingComponents": {    "animation": "/components/css-animation/index",//组件路径  }

}

此篇文章由DurkBlue发布,麻烦转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 5个月前 ( 12-03 )
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(1

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,207人围观)参与讨论

还没有评论,来说两句吧...