이번에는 veloticy-ui를 사용하여 텍스트 애니메이션을 생성하는 방법과 veloticy-ui를 사용하여 텍스트 애니메이션을 생성할 때 어떤 노트가 있는지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.
머리말
최근에는 텍스트 물결선과 유사한 효과를 얻고 싶었습니다. 첫인상은 사용하기 간단하고 코드 양이 적다는 것입니다. 사용 방법에 대한 간략한 소개와 멋진 애니메이션을 구현합니다.
구체적인 사용법은 여기를 클릭하세요
속도를 사용하려면- ui, 먼저 속도를 도입해야 합니다. 여기서 속도는 jquery에 의존할 수 있습니다. 또는 jquery에 의존하지 않습니다. 아래 세부 정보를 살펴보세요//不依赖jquery，第一个参数为原生js的dom选择器
Velocity(document.getElementById("dummy"), {
opacity: 0.5
}, {
duration: 1000
});
// 使用 jQuery 或 Zepto 时
$("#dummy").velocity({
opacity: 0.5
}, {
duration: 1000
});
$element.velocity({
width: "500px", // 动画属性 宽度到 "500px" 的动画
property2: value2 // 属性示例
}, {
/* Velocity 动画配置项的默认值 */
duration: 400, // 动画执行时间
easing: "swing", // 缓动效果
queue: "", // 队列
begin: undefined, // 动画开始时的回调函数
progress: undefined, // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
complete: undefined, // 动画结束时的回调函数
display: undefined, // 动画结束时设置元素的 css display 属性
visibility: undefined, // 动画结束时设置元素的 css visibility 属性
loop: false, // 循环
delay: false, // 延迟
mobileHA: true // 移动端硬件加速（默认开启）
});
width: ["500px", "300px"]//这样设置后面的300px会作为初始默认值
width: ["500px", "spring"，"300px"]//这样可以为单个属性指定缓动函数
width: function (index, total) {}//对集合对象可以设置不同的属性值스크롤, 마무리 및 역방향을 포함하여 애니메이션을 구현하기 위한 몇 가지 지침을 제공합니다. 또한 Velocity는 변환 및 색상과 같은 속성 애니메이션에 대한 지원을 구현하고 SVG 및 Promise를 지원합니다. 특히 위에 링크된 문서를 사용하세요. velocity-ui 더 많은 지침을 제공하는 것 외에도 RunSequence 및 RegisterEffect 두 가지 메서드도 제공합니다(jquery가 아닌 경우 $.를 제거하고 jquery를 기본 DOM으로 대체할 수 있음)
// 将嵌套动画序列储存到一个数组里，很清晰的显示了它们的执行顺序
var mySequence = [
{ e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
{ e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
{ e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];
// 调用这个自定义的序列名称 还可以在其他地方复用
$.Velocity.RunSequence(mySequence);
// name：动画特效名称 为字符串类型
// defaultDuration：默认动画执行时间 单位为毫秒(ms)
// calls：动画队列数组，property - 动画属性，durationPercentage - 当前动画所占总时间的百分比 (写成浮点数)，option - 选项
// reset：设置元素在动画开始时的初始值
$.Velocity.RegisterEffect(name, {
defaultDuration: duration,
calls: [
[ { property: value }, durationPercentage, { options } ],
[ { property: value }, durationPercentage, { options } ]
],
reset: { property: value, property: value }
});<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="renderer" content="webkit">
<title>Document</title>
</head>
<body>
<h1 id="J_Text">segmentfault</h1>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.ui.min.js"></script>
<script>
jQuery(function ($) {
$.Velocity.RegisterEffect('custom', {//注册一个叫'custom'自定义动画
defaultDuration: 1500,
calls:[
[{
rotateY: 360,
translateY: '-=15',
}, 0.5],
[{
translateY: '+=15',
}, 0.5]
],
})
$('#J_Text').css({
fontSize: 40,
color: '#333',
}) .html(function () {
return $(this).text().split('').map(function (char) {
return '<span>' + char + '</span>'; //让每字符被span元素包裹
}).join('');
}).find('span')
.filter(function (index) {
return index > 6
}).css('color', '#009A63').end() //让后面几个字符变为绿色
.css({
position: 'absolute',
left: function (index) {
return index * 20; //设置字符的间隔
}
})
.velocity('custom', { //调用自定义的动画指令
stagger: 300,
delay: 1000,
})
})
</script>
</body>
</html>일부 캐릭터 작업을 제거하면 겉보기에 복잡해 보이는 애니메이션을 구현하려면 간단히 호출을 설정하려면 이 gif는 애니메이션을 루프로 재생하는 것만으로도 충분합니다. 실제로 이 애니메이션은 전체 대기열의 루프를 구현하는 방법을 생각해 볼 수 있습니다.
마지막으로
Velocity는 애니메이션을 내부적으로 제어합니다. 성능면에서 최적화되었기 때문에 성능은 jquery의 animate보다 좋고, CSS의 Transition보다 더 좋습니다. 물론 이건 테스트해보지는 않았으니 테스트해보시면 됩니다. .
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:
jquery+css3을 사용하여 생방송 플랫폼 탐색
마우스 반응형 Taobao 애니메이션 효과 구현
위 내용은 veloticy-ui를 사용하여 텍스트 애니메이션을 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
