veloticy-ui는 텍스트 애니메이션 효과를 구현합니다.

이 글에서는 veloticy-ui를 사용하여 텍스트 애니메이션 효과를 생성하는 방법과 기본적인 사용 방법을 주로 소개합니다. 필요한 친구들은 참고하면 됩니다.

머리말

최근에는 텍스트 물결 모양과 유사한 효과를 얻고 싶습니다. 라인, 속도를 활용 - UI 애니메이션 라이브러리의 첫인상은 사용하기 쉽고, 코드의 양이 적으며, 성능이 뛰어나다는 것입니다. 여기서는 사용 방법과 멋진 애니메이션을 구현하는 방법을 간략하게 소개하겠습니다.

구체적인 사용 방법은 여기를 클릭하세요.

Basic을 사용하려면

velocity-ui를 사용하려면 먼저 Velocity를 도입해야 합니다.

jquery를 사용할 때 속도의 기본 사용은 다음과 같습니다. jquery의 animate와 마찬가지로, Velocity-ui를 도입하는 목적은 정의된 애니메이션(명령어)을 제공하는 것입니다. Animate.css와 같은 애니메이션 라이브러리가 있지만 제공할 수도 있습니다. 좀 더 자세한 제어는

기본 구성 항목

//不依赖jquery，第一个参数为原生js的dom选择器
Velocity(document.getElementById("dummy"), {
 opacity: 0.5
}, {
 duration: 1000
});
// 使用 jQuery 或 Zepto 时
$("#dummy").velocity({
 opacity: 0.5
}, {
 duration: 1000
});

velocity에서도 quequ를 설정할 수 있음을 알 수 있으며, 사용법은 animate와 일관되며, Velocity 자체에서는 fadeIn/fadeOut, SlideUp 등 애니메이션을 구현하기 위한 몇 가지 명령을 제공합니다. /slideDown, scroll,finish, reverse , 또한 Velocity는 변환 및 색상과 같은 속성 애니메이션에 대한 지원을 구현했으며 SVG 및 Promise를 지원합니다. 구체적인 사용법은 위에 링크된 문서를 참조하세요. velocity-ui 더 많은 지침을 제공하는 것 외에도 RunSequence 및 RegisterEffect 두 가지 메서드도 제공합니다(jquery가 아닌 경우 $.를 제거하고 jquery를 기본 DOM으로 대체할 수 있음)

$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) {}//对集合对象可以设置不同的属性值

위의 두 가지 기능 외에도 3가지 기능도 제공합니다. 추가 옵션 속성

stagger를 사용하면 컬렉션 개체가 일정 시간 동안 애니메이션을 비틀게 할 수 있습니다.

드래그를 사용하면 컬렉션 개체의 마지막 요소에 버퍼링 효과가 있을 수 있습니다.

뒤로 컬렉션 개체가 앞으로 일정 시간 간격을 두도록 허용합니다. 마지막 요소 애니메이션 실행

RegisterEffect 및 stagger를 사용하여 간단한 텍스트 애니메이션을 구현해 보겠습니다.

사용자 정의 애니메이션을 구현하려면

// 将嵌套动画序列储存到一个数组里，很清晰的显示了它们的执行顺序
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 }
});

일부 캐릭터 작업을 제거하면 겉보기에 복잡해 보이는 애니메이션을 구현하려면 간단히 호출을 설정하려면 이 gif는 애니메이션을 루프로 재생하는 것만으로도 충분합니다. 실제로 이 애니메이션은 전체 대기열의 루프를 구현하는 방법을 생각해 볼 수 있습니다.

드디어

애니메이션으로 인해 내부적으로 속도가 성능적으로 최적화되어 있어서 jquery의 animate보다 성능이 좋고, CSS의 Transition보다 더 좋습니다. 물론 이건 테스트해보진 않았으니 테스트해보시면 됩니다. 그것.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사: vue-admin과 백엔드(flask)의 분리 및 결합에 대한 자세한 해석

jQuery에서 시간 제한 대화 상자 숨기기를 구현하는 방법

jquery+를 사용하여 Panda TV 탐색을 구현하는 방법 CSS3

위 내용은 veloticy-ui는 텍스트 애니메이션 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!