Transpose Clippath CSS Keyframe animations into animejs animation
Transpose Clippath CSS Keyframe animations into animejs animation
我有这个关键帧动画效果很好:
body{
background: red;
}
.myAnimation{
width: 100px;
height: 200px;
background: blue;
clip-path: inset(100px 50px);
animation: myClipAnim 3s infinite;
transition: animation 2s;
}
@keyframes myClipAnim {
100% { clip-path: inset(0) }
}
<body>
<div class="myAnimation"></div>
</body>
现在我想用 animejs 重现完全相同的动画,所以我尝试了以下方法:
anime({
targets: '.myAnimation',
direction: 'reverse',
keyframes: [
{clipPath: 'inset(0)' }
],
duration: 3000
});
body{
background: red;
}
.myAnimation{
width: 100px;
height: 200px;
background: blue;
clip-path: inset(100px 50px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<body>
<div class="myAnimation"></div>
</body>
但是它不起作用,我不明白为什么。我哪里错了?
请帮忙!
在 animejs 中你必须指定至少两个关键帧(开始帧和结束帧),否则它将是静态的。
因此,在添加第二个关键帧 {clipPath: 'inset(100px 50px)'}
之后,我添加了循环和缓动属性以匹配您基于 CSS 的示例。
anime({
targets: '.myAnimation',
direction: 'reverse',
easing: 'easeInOutSine', // choose from https://animejs.com/documentation/#pennerFunctions
loop: true, // let the animation repeat itself
keyframes: [
{clipPath: 'inset(0)' }, // start frame
{clipPath: 'inset(100px 50px)'}, // end frame
],
duration: 3000
});
body{
background: red;
}
.myAnimation{
width: 100px;
height: 200px;
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<body>
<div class="myAnimation"></div>
</body>
我有这个关键帧动画效果很好:
body{
background: red;
}
.myAnimation{
width: 100px;
height: 200px;
background: blue;
clip-path: inset(100px 50px);
animation: myClipAnim 3s infinite;
transition: animation 2s;
}
@keyframes myClipAnim {
100% { clip-path: inset(0) }
}
<body>
<div class="myAnimation"></div>
</body>
现在我想用 animejs 重现完全相同的动画,所以我尝试了以下方法:
anime({
targets: '.myAnimation',
direction: 'reverse',
keyframes: [
{clipPath: 'inset(0)' }
],
duration: 3000
});
body{
background: red;
}
.myAnimation{
width: 100px;
height: 200px;
background: blue;
clip-path: inset(100px 50px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<body>
<div class="myAnimation"></div>
</body>
但是它不起作用,我不明白为什么。我哪里错了? 请帮忙!
在 animejs 中你必须指定至少两个关键帧(开始帧和结束帧),否则它将是静态的。
因此,在添加第二个关键帧 {clipPath: 'inset(100px 50px)'}
之后,我添加了循环和缓动属性以匹配您基于 CSS 的示例。
anime({
targets: '.myAnimation',
direction: 'reverse',
easing: 'easeInOutSine', // choose from https://animejs.com/documentation/#pennerFunctions
loop: true, // let the animation repeat itself
keyframes: [
{clipPath: 'inset(0)' }, // start frame
{clipPath: 'inset(100px 50px)'}, // end frame
],
duration: 3000
});
body{
background: red;
}
.myAnimation{
width: 100px;
height: 200px;
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<body>
<div class="myAnimation"></div>
</body>