抱着学习态度评论 發表於 2026-2-9 10:24:00

uniapp多边形动画

<h2 id="实现效果">实现效果</h2>
<ul>
<li>使用三角形，四边形等拼成一个爱心的图形。</li>
<li>爱心的图形一段时间会有高光闪过。</li>
<li>点击爱心图形会使拼成一个心字。</li>
</ul>
<h2 id="实现思路">实现思路</h2>
<p>三角形，四边形可以用clip-path: polygon();画出来，确定几个顶点可以画出任意图形。<br>
高光需要在每个多边形添加动画延迟然后加上统一的动画。<br>
爱心变成心字只需要确定更改后的多边形顶点位置，再使用transition变换即可。</p>
<h2 id="问题点">问题点</h2>
<p>暂无</p>
<h2 id="整体代码">整体代码</h2>
<p>重要属性如下</p>
<ul>
<li>clip-path: polygon绘制多边形</li>
<li>transition图形变换</li>
<li>animation动画</li>
<li>transition-duration变换时间</li>
<li>animation-delay动画延迟</li>
</ul>
<pre><code class="language-html">&lt;view class="chartsMain"&gt;
        &lt;view class="container" :class="animationStarted &amp;&amp; 'font'"&gt;
                &lt;view class="triangle" id="triangle1"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle2"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle3"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle4"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle5"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle6"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle7"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle8"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle9"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle10"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle11"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle12"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle13"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle14"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle15"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle16"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle17"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle18"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle19"&gt;&lt;/view&gt;
                &lt;view class="triangle" id="triangle20"&gt;&lt;/view&gt;
        &lt;/view&gt;
&lt;/view&gt;

&lt;button class="blueBtn cu-btn bg-blue shadow lg" @tap="toggleAnimation" :disabled="isMoveing"&gt;来点动画&lt;/button&gt;

&lt;script&gt;
        export default {
                data() {
                        return {
                                animationStarted: false,
                                isMoveing: false,
                        }
                },
                methods: {
                        toggleAnimation() {
                                if (this.isMoveing) return
                                this.animationStarted = !this.animationStarted
                                this.isMoveing = true
                                setTimeout(() =&gt; {
                                        this.isMoveing = false
                                }, 600)
                        }
                }
        }
&lt;/script&gt;

&lt;style&gt;
        .body {
                text-align: center;
        }
        .chartsMain {
                width: 750rpx;
                padding: 15rpx 0;
                background: #fff;
                margin-bottom: 24rpx;
                border-top: 2rpx solid #f2f2f2;
        }

.container {
        position: relative;
        width: 484rpx;
        height: 484rpx;
        margin: 0 auto;
        outline: 1rpx dashed;
}

.triangle {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: 1s ease-in-out;
        animation: opacity 1s ease-in 2s infinite;
}

#triangle1 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(75rpx 143rpx, 149rpx 80rpx, 182rpx 134rpx);
        transition-duration: 0ms;
        animation-delay: 0ms;
}
#triangle2 {
        background-color: rgb(237, 114, 110);
        clip-path: polygon(149rpx 80rpx, 242rpx 131rpx, 182rpx 134rpx);
        transition-duration: 10ms;
        animation-delay: 10ms;
}
#triangle3 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(75rpx 143rpx, 149rpx 240rpx, 125rpx 266rpx);
        transition-duration: 20ms;
        animation-delay: 20ms;
}
#triangle4 {
        background-color: rgb(238, 61, 82);
        clip-path: polygon(75rpx 143rpx, 182rpx 134rpx, 206rpx 173rpx, 149rpx 240rpx);
        transition-duration: 30ms;
        animation-delay: 30ms;
}
#triangle5 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(182rpx 134rpx, 242rpx 131rpx, 206rpx 173rpx);
        transition-duration: 40ms;
        animation-delay: 40ms;
}
#triangle6 {
        background-color: rgb(232, 94, 74);
        clip-path: polygon(206rpx 173rpx, 242rpx 131rpx, 242rpx 232rpx);
        transition-duration: 50ms;
        animation-delay: 50ms;
}
#triangle7 {
        background-color: rgb(238, 58, 86);
        clip-path: polygon(125rpx 266rpx, 149rpx 240rpx, 161rpx 258rpx);
        transition-duration: 60ms;
        animation-delay: 60ms;
}
#triangle8 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(149rpx 240rpx, 206rpx 173rpx, 242rpx 232rpx, 161rpx 258rpx);
        transition-duration: 70ms;
        animation-delay: 70ms;
}
#triangle9 {
        background-color: rgb(211, 74, 98);
        clip-path: polygon(125rpx 266rpx, 161rpx 258rpx, 242rpx 368rpx);
        transition-duration: 80ms;
        animation-delay: 80ms;
}
#triangle10 {
        background-color: rgb(216, 44, 54);
        clip-path: polygon(161rpx 258rpx, 242rpx 232rpx, 242rpx 368rpx);
        transition-duration: 90ms;
        animation-delay: 90ms;
}
#triangle11 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(409rpx 143rpx, 335rpx 80rpx, 302rpx 134rpx);
        transition-duration: 100ms;
        animation-delay: 100ms;
}
#triangle12 {
        background-color: rgb(237, 114, 110);
        clip-path: polygon(335rpx 80rpx, 242rpx 131rpx, 302rpx 134rpx);
        transition-duration: 110ms;
        animation-delay: 110ms;
}
#triangle13 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(409rpx 143rpx, 335rpx 240rpx, 359rpx 266rpx);
        transition-duration: 120ms;
        animation-delay: 120ms;
}
#triangle14 {
        background-color: rgb(238, 61, 82);
        clip-path: polygon(409rpx 143rpx, 302rpx 134rpx, 278rpx 173rpx, 335rpx 240rpx);
        transition-duration: 130ms;
        animation-delay: 130ms;
}
#triangle15 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(302rpx 134rpx, 242rpx 131rpx, 278rpx 173rpx);
        transition-duration: 140ms;
        animation-delay: 140ms;
}
#triangle16 {
        background-color: rgb(216, 44, 54);
        clip-path: polygon(278rpx 173rpx, 242rpx 131rpx, 242rpx 232rpx);
        transition-duration: 150ms;
        animation-delay: 150ms;
}
#triangle17 {
        background-color: rgb(238, 58, 86);
        clip-path: polygon(359rpx 266rpx, 335rpx 240rpx, 323rpx 258rpx);
        transition-duration: 160ms;
        animation-delay: 160ms;
}
#triangle18 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(335rpx 240rpx, 278rpx 173rpx, 242rpx 232rpx, 323rpx 258rpx);
        transition-duration: 170ms;
        animation-delay: 170ms;
}
#triangle19 {
        background-color: rgb(211, 74, 98);
        clip-path: polygon(359rpx 266rpx, 323rpx 258rpx, 242rpx 368rpx);
        transition-duration: 180ms;
        animation-delay: 180ms;
}
#triangle20 {
        background-color: rgb(232, 94, 74);
        clip-path: polygon(323rpx 258rpx, 242rpx 232rpx, 242rpx 368rpx);
        transition-duration: 190ms;
        animation-delay: 190ms;
}

.font #triangle1 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(42rpx 273rpx, 77rpx 192rpx, 96rpx 234rpx);
}
.font #triangle2 {
        background-color: rgb(237, 114, 110);
        clip-path: polygon(42rpx 273rpx, 96rpx 234rpx, 87rpx 336rpx);
}
.font #triangle3 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(40rpx 330rpx, 42rpx 273rpx, 87rpx 336rpx);
}
.font #triangle4 {
        background-color: rgb(238, 61, 82);
        clip-path: polygon(40rpx 330rpx, 87rpx 336rpx, 57rpx 348rpx);
}
.font #triangle5 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(135rpx 192rpx, 228rpx 285rpx, 202rpx 324rpx);
}
.font #triangle6 {
        background-color: rgb(232, 94, 74);
        clip-path: polygon(202rpx 324rpx, 228rpx 285rpx, 306rpx 306rpx);
}
.font #triangle7 {
        background-color: rgb(238, 58, 86);
        clip-path: polygon(202rpx 324rpx, 306rpx 306rpx, 252rpx 358rpx);
}
.font #triangle8 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(252rpx 358rpx, 306rpx 306rpx, 354rpx 368rpx);
}
.font #triangle9 {
        background-color: rgb(211, 74, 98);
        clip-path: polygon(306rpx 306rpx, 362rpx 308rpx, 354rpx 368rpx);
}
.font #triangle10 {
        background-color: rgb(216, 44, 54);
        clip-path: polygon(354rpx 368rpx, 362rpx 308rpx, 430rpx 354rpx);
}
.font #triangle11 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(362rpx 308rpx, 348rpx 221rpx, 406rpx 290rpx);
}
.font #triangle12 {
        background-color: rgb(237, 114, 110);
        clip-path: polygon(362rpx 308rpx, 406rpx 290rpx, 430rpx 354rpx);
}
.font #triangle13 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(406rpx 290rpx, 453rpx 315rpx, 430rpx 354rpx);
}
.font #triangle14 {
        background-color: rgb(238, 61, 82);
        clip-path: polygon(226rpx 152rpx, 236rpx 136rpx, 266rpx 140rpx);
}
.font #triangle15 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(226rpx 152rpx, 266rpx 140rpx, 282rpx 165rpx);
}
.font #triangle16 {
        background-color: rgb(216, 44, 54);
        clip-path: polygon(266rpx 140rpx, 298rpx 125rpx, 282rpx 165rpx);
}
.font #triangle17 {
        background-color: rgb(238, 58, 86);
        clip-path: polygon(226rpx 152rpx, 282rpx 165rpx, 260rpx 200rpx);
}
.font #triangle18 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(338rpx 108rpx, 405rpx 108rpx, 418rpx 186rpx);
}
.font #triangle19 {
        background-color: rgb(211, 74, 98);
        clip-path: polygon(405rpx 108rpx, 453rpx 144rpx, 418rpx 186rpx);
}
.font #triangle20 {
        background-color: rgb(232, 94, 74);
        clip-path: polygon(418rpx 186rpx, 453rpx 144rpx, 456rpx 165rpx);
}

@keyframes opacity {
        0% {
          opacity: 1;
        }
        25% {
          opacity: 0.6;
        }
        50% {
          opacity: 0.8;
        }
        75% {
          opacity: 0.8;
        }
        100% {
          opacity: 1;
        }
}
&lt;/style&gt;
</code></pre><br><br>
来源：https://www.cnblogs.com/carrote/p/19593955
頁: [1]
查看完整版本: uniapp多边形动画