<template>
  <div>
      <h3>圍繞圓弧移動(dòng)動(dòng)畫</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: { // 需要轉(zhuǎn)動(dòng)的角度
                type: Number,
                default: 0
            },
            bigR: { // 外層大圓半徑
                type: Number,
                default: 0
            },
            minR: { //移動(dòng)小圓半徑
                type: Number,
                default: 0
            },
            backgroundColor: {
                type: String,
                default: '#7fffd4'
            }
        },
        data() {
            return {
                top: '',
                right: '',
                setAngle: 0
            }
        },
        mounted() {

        },
        computed: {
            /**
             * sin 對應(yīng) y 的值，轉(zhuǎn)換為定位中距離頂部top等于 圓的半徑 - y - 小圓半徑（讓圓心在圓弧上）
             * cos 對應(yīng) x 的值，轉(zhuǎn)換為定位中距離右邊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() {
            	// 調(diào)整 累加值，改變速度
                this.setAngle += 1
                timer = raf(this.toMove)
                // 結(jié)束動(dòng)畫
                if(this.setAngle > this.angle) {
                    caf(timer)
                    // 也可以根據(jù)需要重復(fù)執(zhí)行
                    // this.setAngle = 0
                }
            }
        }
    }
</script>

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