小程序如何使用css3动画

1、利用样式实现小程序动画(用法和css用法相识)

wxml 文件

<image class="aniamtion" src="//images/page4jfif" style="width:200rpx;height:200rpx;  position:  relative;"></image>

wxss文件

aniamtion {

animation: mymove 5s infinite;

/ //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 /

}

@keyframes mymove {

from {

  / left: 0px; /

/ transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); /

transform: rotate3d(100,200,300,0deg);

}

to {

 / left: 200px; /

/ transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); /

transform: rotate3d(200,300,400,360deg);

}

}

2、 用小程序的API来实现动画

用wxcreateAnimation(object) 来创建一个动画 -->返回一个animation对象

创建一个动画实例 animation。

onReady: function () {

thisanimation = wxcreateAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

调用实例的方法来描述动画。

Animationstep() 表示一组动画的完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画

rotate(){

thisanimationrotate(150)step() //对动画进行简单的描述

thissetData({

         animation:thisanimationexport()

})

},

最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

thisanimationexport() 导出动画队列。export 方法每次调用后会清掉之前的动画 *** 作

rotate(){

thisanimationrotate(150)step() //对动画进行简单的描述

thissetData({ // 在setData({}) 导出动画数据数据给组件

         animation:thisanimationexport()

})

},

完整的wxml

<view class="container">

<view animation="{{animation}}" class="view">

将做动画的块

</view>

</view>

<button type="default" size="mini" bindtap="rotate">

旋转

</button>

完整的wxjs

Page({

data: {

animation:''

},

onReady: function () {

thisanimation = wxcreateAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

rotate(){

thisanimationrotate(150)step()translate(100)step()

thissetData({

animation:thisanimationexport()

})

}

})

3、用选择器来绑定组件来来实现组件的动画（小程序290 的库可用，版本不够会报thisanimate不是一个方法）

<text>pages/index7/index7wxml</text>

<view id="container" style="height: 100px; width: 100px; background-color: blue;">

container

</view>

<view class="block" style="height: 100px; width: 100px;background-color: #ccc;">

block

</view>

用选择器选择相应的组件进行相应的动画

进行关键帧的处理

onLoad: function () {

  thisanimate('#container', [

    { opacity: 10, rotate: 0, backgroundColor: '#FF0000' },

    { opacity: 05, rotate: 45, backgroundColor: '#00FF00' },

    { opacity: 10, rotate: 90, backgroundColor: '#FF0000' },

  ], 5000)

  thisanimate('block', [

    { scale: [1, 1], rotate: 0, ease: 'ease-out' },

    { scale: [15, 15], rotate: 45, ease: 'ease-in'},

    { scale: [2, 2], rotate: 90 },

  ], 5000)

},

}

4、用第三方的库 animationcss

需要做的有

从>

把 css 文件 改名成 wxss文件（可进行相应的需改，毕竟小程序的大小限制摆在那里）

把它引入到你的appwxss文件中

@import “动画文件的相对目录”

在用的时候把他和你的样式绑定

<view class="swing" style="height: 100px; width: 100px;background-color: #ccc;">

block

</view>

// 给类名为swing 的文件绑定swing 的动画

swing{

animation: swing 5s infinite;

}

在小程序中,有两个音频播放,一个是InnerAudioContext(音频),一个是BackgroundAudioManager(背景音频)

这两个api都可以在微信开发者文档里的api里面的音频和背景音频中找到

先说说这两个的区别:

InnerAudioContext BackgroundAudioManager

没有标题 必须填写标题

没有封面,专辑名,歌手等信息 可填封面,专辑名,歌手等信息

在小程序进入后台的时候会被暂停 在小程序进入后台时依旧会播放

手机状态栏不会有信息,微信内没有悬浮标志 手机状态栏会有类似于QQ音乐的音乐框,微信内部有悬浮的标志

只能通过事件方法进行暂停,销毁 用户可以通过状态栏,悬浮窗进行暂停,销毁

多次执行会同时播放多个音频 多次执行只会重新播放,不会出现多个

同一src多次调用会多次播放 同一src多次调用不多次播放,不重新播放(不影响播放)

再说说使用方法

其实两者的使用方法一模一样

写法:

InnerAudioContext

以上就是关于小程序如何使用css3动画全部的内容，包括:小程序如何使用css3动画、inneraudiocontext与backgroundaudiocontext区别、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！