vue动画怎么实现,vue中的动画特效
最后两个项目都是关于vue的。整理完之后，本文主要介绍如何用vue实现一个围绕圆弧的有趣动画效果的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
1.0原官网示例2.0我们实现的结果3.0简单分析4.0代码实现5.0总结前几天在楼上好朋友小黑的介绍下，看到某平台官网有一个人物介绍模块，里面的动画感觉不错，就自己写了一个。
1.0 原官网示例
当然这里去掉了具体的信息。原网站有圈内人头像，旁边有介绍信息。每个人沿着圆弧移动到指定位置。
2.0 我们实现的结果
当你点击中间开始时，几个球一次旋转到一个固定的角度。
3.0 简单分析下
要让小圆在圆弧上运动，我们只需要知道圆心在圆弧上的坐标(x，y)。
所以当我们知道了外圆的半径，小圆的半径，角度，就可以用三角函数计算出小圆在010到59000的圆弧上的位置。
4.0 代码实现
这里小动圆封装成一个组件top right。你只需要添加moveRound，大圆半径，小圆半径，其余的可以根据你的需求添加。
模板
差异
H3围绕弧线移动动画/h3
div class=arc_bo
move-round:minR= 25 :bigR= 150 :angle= 30 ref= m round 1 /move-round
start @ click= to move start/span
/div
/div
/模板
脚本
从导入moveRound。/components/moveRound.vue
导出默认值{
姓名： arcMoveAni ，
组件：{
来回移动
},
方法：{
toMove() {
这个。$refs.mRound1.toMove()
}
}
}
/脚本
样式范围。arc_bo{
边距：0自动；
宽度：6雷姆；
身高：6雷姆；
边界半径：50%；
边框：1px纯色# ccc
位置：相对；
margin-top:2 rem；
}。开始{
位置：绝对；
top:50%；
左：50%；
transform: translate(-50%，-50%)；
颜色：# f40
宽度：1雷姆；
身高：1雷姆；
边界半径：50%；
边框：1px纯色# ccc
文本对齐：居中；
行高：1雷姆；
}
/风格
转动的角度组件，moveRound计算top和right的值，其中角度的动态改变是raf,caf的兼容处理。不懂的可以看以前的文章或者百度。
模板
差异
div class= round :style= set position /div
/div
/模板
脚本
让定时器=0
从导入{ raf，caf }././utils/raf
导出默认值{
名称： moveRound ，
道具：{
角度：{//需要旋转的角度
类型：数量，
默认值：0
},
BigR: {//外大圆的半径
类型：数量，
默认值：0
},
min:{//移动小圆的半径
类型：数量，
默认值：0
},
背景颜色：{
类型：字符串，
默认值： #7fffd4
}
},
data() {
返回{
顶部： ，
对：“”，
设置角度：0
}
},
已安装(){
},
计算值：{
/**
* sin对应y的值，换算成离顶顶的距离等于圆的半径的位置-y-小圆的半径(设圆心在圆弧上)。
* cos对应x的值，换算成定位中的右距等于圆的半径-x-小圆的半径。
* **/
setPosition( { top，right，setAngle，bigR，minR，backgroundColor} ) {
设size=minR*2 px
设x=bigR *(1-Math . cos(set angle * Math。PI/180)) - minR
设y=bigR *(1-Math . sin(setAngle * Math。PI/180)) - minR
右=x px
top=y px
返回{
顶，
对，
宽度：尺寸，
高度：尺寸，
背景颜色
}
}
},
方法：{
toMove() {
//调整累计值，改变速度。
this.setAngle=1
timer=raf(this.toMove)
//结束动画
if(this.setAngle this.angle) {
咖啡(计时器)
//也可以根据需要重复。
//this.setAngle=0
}
}
}
}
/脚本
风格。圆形{
位置：绝对；
will-change:上，右；
边界半径：50%；
}
/风格
5.0 总结
要点是根据角度计算位置。只要思路正确，应该可以少走弯路。
关于用vue实现一个有趣的圆弧动画效果的这篇文章到此为止。更多相关vue圆弧动画内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。