小程序微店—如何在微信小程序中制作圆点沿着

手机微信微信小程序中制作圆点沿着圆圈运动健身健身运动的日本动漫?一定有许多朋友很是期待吧，下面就是详细的内容。

最开始用 wx.createAnimation(OBJECT) 创建一个日本动漫实例，OBJECT 里的关键主要参数是设置日本动漫 duration、timingFunction、delay、transformOrigin;接着依据 export 方法将日本动漫实例输出并 setData 给构件 data{} 里的 animation 特点。
[标识:內容1]

在一开始说下面的小日本动漫之前务必注意以下好多个层面：

手机微信微信小程序官方网网日本动漫 API 文字文本文档的最下面的 bug tip ：

bug: IOS/Android 6.3.30 依据step()分隔日本动漫，唯一第一步日本动漫能见效。

在手机微信微信小程序日本动漫文字文本文档里的 wx.creatAnimation(OBJECT) 这一方法提供的关键主要参数没有相仿 css3 animation-iteration-count 那般的关键主要参数。

接来便说说下面的小日本动漫案例：

如圖大伙儿要进行小圆点沿着圆圈健身运动运动轨迹运动健身健身运动的小日本动漫。

WXML:

两个 view 标志，一个是相对性相对路径圆圈，圆圈可以用状况图来做还能够用 border-radius 来进行；一个是圆点。

view 'animation-box\'

view class = \'time-crl-path\' /view

view class = \'crl-dot\' animation=\'{{dotAnData}}\' /view

/view

WXSS:

基本设置精确精准定位，这儿只放宽高。

.animation-box{

width: 176px;

height:176px;

}

.time-crl-path {

width: 176px;

height: 176px;

......

}

.crl-dot {

width: 9px;

height:9px;

......

}

JS:

transformOrigin 这一关键主要参数所设置的是小圆点旋转时的原点，默认设置设定是原素管理方法管理中心，下面设置的就是相对性相对路径圆圈的管理方法管理中心，具体关键主要参数务必根据相对性相对路径圆圈不上算。

Page({

data: {

dotAnData: {}

},

onShow: function(){

var i = 0

var dotAnData =wx.createAnimation({

duration: 1000,

transformOrigin: \'4px 91px\'

})

dotAnFun =setInterval(function() {

dotAnData.rotate(6 * (++i)).step()

that.setData({

dotAnData: dotAnData.export()

})

}.bind(that), 1000)

}

})

从上面的编号可以看出是运用 setInterval() 解决了文章内容內容刚开始的二项注意事项。

那么为什么虚假行 rotate(360) 或者 rotate(180) ?

这就必须注意官方网网文字文本文档的 rotate(deg) 的 deg 的取值范围 -180 ~ 180，从原点顺时针方向方位旋转一个 deg。也是有就是 rotate animation 在运动健身健身运动角度幅度非常大的情况下健身运动运动轨迹会出現偏位，就是说在一切一切正常设置的 transformOrigin 的情况下圆点运动健身健身运动健身运动运动轨迹会出現偏位。

因而上面的小日本动漫案例就是把它拆分，定义 deg 为 6 作基本提高量， ++i 累加，那般在一切一切正常的 transformOrigin 下所有日本动漫就是由每个小日本动漫 rotate(6) 组成的。

目前手机微信微信小程序日本动漫对于日本动漫具体实际效果还是较为比较有限制的，可是简单的日本动漫具体实际效果是一切一切正常的啦~

以上就是如何手中机手机微信手机微信微信小程序中制作圆点沿着圆圈运动健身健身运动的日本动漫的全部内容了，大家都学精了沒有?