教你用vue實現(xiàn)一個有趣的圍繞圓弧動畫效果

更新時間：2022年04月24日 11:17:01 作者：海龜先生plus

最近做的兩個項目都是關于vue的,做完整理一下,這篇文章主要給大家介紹了關于如何用vue實現(xiàn)一個有趣的圍繞圓弧動畫效果的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

1.0 原官網(wǎng)示例

當然這里去掉了具體信息，原網(wǎng)站是里面圓圈中是人物的頭像，旁邊是介紹信息，每個人物就沿著圓弧移動到指定位置

2.0 我們實現(xiàn)的結果

當點擊中間開始時，幾個小球一次轉動到固定角度

3.0 簡單分析下

要讓小圓在圓弧上動，我們只需要知道圓心在圓弧上的坐標（x,y）就行了

所以當我們知道外圓的半徑，小圓的半徑，以及角度再利用三角函數(shù)就可以計算出小圓在圓弧上定位的位置 top right

4.0 代碼實現(xiàn)

這里是將移動的小圓封裝成一個組件 moveRound，只需要將 大圓半徑，小圓半徑，轉動的角度，剩下的就可以按自己需要添加

<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>

moveRound組件， 角度的動態(tài)改變計算 top,right的值，其中 raf,caf是 requestAnimationFrame的兼容處理，不明白的可以看往期文章或者百度。

<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)
                    // 也可以根據(jù)需要重復執(zhí)行
                    // this.setAngle = 0
                }
            }
        }
    }
</script>

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