开发微信小程序的优点—怎样在小程序中制作圆点沿着圆圈运动的动画?

  • 栏目:服务优势 时间:2021-02-21 08:38 分享新闻到:
<返回列表

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

最开始用 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) 组成的。

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

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

分享新闻到:

更多阅读

开发微信小程序的优点—怎样在小程序中

服务优势 2021-02-21
手机上手机微信手机微信微信小程序中制作圆点顺着圆圈健身运动运动健身运动健身健身运动...
查看全文

奎文企业网站建设公司—midifan:我们关注

服务优势 2021-02-14
13 钟头前 褔利:Loopmasters 公布完全彻底完全免费的 Christmas Present 2020 音色库 Loopmasters 公布 ...
查看全文

html制作网页案例代码

服务优势 2020-12-29
html制作网页案例代码:利用人工智能实现小程序自动答题 ♚  作者 Yiutto 编程浪子  GitHub gi...
查看全文
返回全部新闻


区域站点: 南丰县ps怎么抠图   南宫市在线图表制作网站   囊谦县抠图神器   南和县图文制作   南华县ps怎么抠图   南江县在线图表制作网站   南京市抠图神器   南靖县图文制作   南康市ps怎么抠图   南乐县在线图表制作网站   南陵县抠图神器   南宁市图文制作   南平市ps怎么抠图   南皮县在线图表制作网站   南市区抠图神器   南通市图文制作   南投县ps怎么抠图   南雄市在线图表制作网站   南溪县抠图神器   南阳市图文制作   南漳县ps怎么抠图   南召县在线图表制作网站   南郑县抠图神器   那坡县图文制作   那曲县ps怎么抠图   纳雍县在线图表制作网站   讷河市抠图神器   内黄县图文制作   内江市ps怎么抠图   内丘县在线图表制作网站   内乡县抠图神器   嫩江市图文制作   聂荣县ps怎么抠图   尼玛县在线图表制作网站   尼木县抠图神器   宁安市图文制作   宁波市ps怎么抠图   宁城县在线图表制作网站   宁德市抠图神器   宁都县图文制作   宁国市ps怎么抠图   宁海县在线图表制作网站   宁化县抠图神器   宁晋县图文制作   宁陵县ps怎么抠图   宁明县在线图表制作网站   宁南县抠图神器   宁强县图文制作   宁陕县ps怎么抠图   宁武县在线图表制作网站   宁乡市抠图神器   宁阳县图文制作   宁远县ps怎么抠图   农安县在线图表制作网站   磐安县抠图神器   盘锦市图文制作   盘山县ps怎么抠图   磐石市在线图表制作网站   盘州市抠图神器   蓬安县图文制作   澎湖县ps怎么抠图   蓬莱市在线图表制作网站   彭山县抠图神器   蓬溪县图文制作   彭阳县ps怎么抠图   彭泽县在线图表制作网站   彭州市抠图神器   偏关县图文制作   平安县ps怎么抠图   平昌县在线图表制作网站   平定县抠图神器   屏东县图文制作   平度市ps怎么抠图   平果县在线图表制作网站   平和县抠图神器   平湖市图文制作   平江县ps怎么抠图   平乐县在线图表制作网站   平凉市抠图神器   平利县图文制作   平罗县ps怎么抠图   平陆县在线图表制作网站   屏南县抠图神器   平泉市图文制作   屏山县ps怎么抠图   平顺县在线图表制作网站   平塘县抠图神器   平潭县图文制作   平武县ps怎么抠图   萍乡市在线图表制作网站   平乡县抠图神器   平阳县图文制作   平遥县ps怎么抠图   平阴县在线图表制作网站   平邑县抠图神器   平远县图文制作   平舆县ps怎么抠图   皮山县在线图表制作网站   普安县抠图神器   浦北县图文制作   浦城县ps怎么抠图   普洱市在线图表制作网站   普格县抠图神器   浦江县图文制作   普兰县ps怎么抠图   普宁市在线图表制作网站   莆田市抠图神器   迁安市图文制作   乾安县ps怎么抠图   潜江市在线图表制作网站   潜山市抠图神器  

友情链接: 在线图表制作网站 修图软件哪个比较 快速抠图软件 ps怎么抠图 手机版 装修知识 软件下载 果树种植 深圳新闻 图片素材 商城模板

Copyright © 2002-2020 抠图神器_图文制作_ps怎么抠图_在线图表制作网站_图文软件 版权所有 (网站地图) 备案号:粤ICP备10235580号