Animejs示例
javascript
示例
text
1<template>
2 <div id="container">
3 <div class="block" v-for="i in 100" :key="i"></div>
4 </div>
5</template>
6
7<script setup lang="ts">
8 import { onMounted, onUnmounted, ref, watchEffect } from 'vue';
9 import anime from 'animejs';
10 import { useData } from 'vitepress';
11
12
13 const customAnimation = () => {
14 let tl = anime.timeline({
15 targets: '.block',
16 autoplay: false,
17 duration: function() {
18 return anime.random(100, 2000);
19 },
20 easing: 'easeInOutExpo',
21 });
22 tl.add({
23 opacity: 1,
24 translateX: () => anime.random(-500, 500),
25 translateY: () => anime.random(-300, 300),
26 scale: () => anime.random(1, 5),
27 easing: 'linear',
28 duration: 3000,
29 delay: anime.stagger(10),
30 });
31 tl.add({
32 opacity: 0,
33 translateX: () => anime.random(0, 0),
34 translateY: () => anime.random(0, 0),
35 scale: () => anime.random(1, 5),
36 easing: 'linear',
37 duration: 3000,
38 delay: anime.stagger(10),
39 });
40 return tl;
41 };
42
43
44 onMounted(() => {
45 customAnimationRef.value = customAnimation();
46 customAnimationRef.value.play();
47 });
48
49 onUnmounted(() => {
50 customAnimationRef.value = null;
51 });
52
53</script>
54
55<style scoped>
56
57 #container {
58 display: flex;
59 justify-content: center;
60 align-items: center;
61 position: absolute;
62 width: 100%;
63 height: 100vh;
64 padding: 10%;
65 }
66 .block {
67 position: absolute;
68 height: 60px;
69 width: 60px;
70 opacity: 0;
71 background: #901ed2;
72 -webkit-box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.2);
73 box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.2);
74 }
75
76</style>
77Letterize
text
1pnpm add letterizejsLetterize.js是一个轻量级的JavaScript库，它可以将文本内容分解为单个字母，以便可以对每个字母进行动画处理。这对于创建复杂的文本动画效果非常有用。
javascript
1
2<h1 class="item" style="z-index: 0;"> {{ textRef }}</h1>
3
4const letterize = new Letterize({ targets: '.item' });
5let tl = anime.timeline({
6 targets: test.listAll,
7 delay: anime.stagger(50),
8 loop: true
9});
10tl
11 .add({
12 translateY: -40
13 })
14 .add({
15 translateY: 0
16 });