教你用vue实现一个有趣的围绕圆弧动画效果

<template>
  <div>
      <h3>围绕圆弧移动动画</h3>
      <div class="arc_bo" >
         <move-round :minR="25" :bigR="150" :angle="30" ref="mRound1" >	     </move-round>
          <span class="start" @click="toMove" >开始</span>
      </div>
  </div>
</template>

<script>
    import moveRound from './components/moveRound.vue'
    export default {
        name: 'arcMoveAni',
        components: {
            moveRound
        },
        methods: {
            toMove() {
                this.$refs.mRound1.toMove()
            }
        }
    }
</script>

<style scoped>
    .arc_bo{
        margin: 0 auto;
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        border: 1px solid #ccc;
        position: relative;
        margin-top: 2rem;
    }
    .start{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: #f40;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 1rem;
    }
</style>

<template>
  <div>
      <div class="round" :style="setPosition" ></div>
  </div>
</template>

<script>
    let timer = 0
    import { raf,caf } from '../../utils/raf'
    export default {
        name: 'moveRound',
        props: {
            angle: { // 需要转动的角度
                type: Number,
                default: 0
            },
            bigR: { // 外层大圆半径
                type: Number,
                default: 0
            },
            minR: { //移动小圆半径
                type: Number,
                default: 0
            },
            backgroundColor: {
                type: String,
                default: '#7fffd4'
            }
        },
        data() {
            return {
                top: '',
                right: '',
                setAngle: 0
            }
        },
        mounted() {

        },
        computed: {
            /**
             * sin 对应 y 的值，转换为定位中距离顶部top等于 圆的半径 - y - 小圆半径（让圆心在圆弧上）
             * cos 对应 x 的值，转换为定位中距离右边right等于 圆的半径 - x - 小圆半径
             * **/ 
            setPosition( { top, right ,setAngle, bigR, minR, backgroundColor} ) {
                let size = minR*2 + 'px'

                let x = bigR * ( 1 - Math.cos(setAngle * Math.PI/180)) - minR
                let y = bigR * ( 1 - Math.sin(setAngle * Math.PI/180))  - minR

                right = x + 'px'
                top = y + 'px'
                return {
                    top,
                    right,
                    width: size,
                    height: size,
                    backgroundColor
                }
            }
        },
        methods: {
            toMove() {
            	// 调整 累加值，改变速度
                this.setAngle += 1
                timer = raf(this.toMove)
                // 结束动画
                if(this.setAngle > this.angle) {
                    caf(timer)
                    // 也可以根据需要重复执行
                    // this.setAngle = 0
                }
            }
        }
    }
</script>

<style>
 .round{
    position: absolute;
    will-change: top,right;
    border-radius: 50%;
 }
</style>