veloticy-ui를 사용하여 텍스트 애니메이션을 생성하는 방법-JS 튜토리얼-php.cn

veloticy-ui를 사용하여 텍스트 애니메이션을 생성하는 방법

php中世界最好的语言

풀어 주다： 2018-03-14 17:38:48

원래의

1493명이 탐색했습니다.

이번에는 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
});

로그인 후 복사

jquery를 사용할 때 속도의 기본 사용이 jquery와 유사하다는 것을 알 수 있습니다. animate.velocity-ui를 도입한 목적은 몇 가지 정의된 애니메이션(지침)을 제공하는 것입니다. Animate.css와 같은 애니메이션 라이브러리가 있지만

더 자세한 제어,

기본 구성 항목

$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도 quequ를 설정할 수 있으며 사용법은 animate와 일치합니다. 게다가 Velocity 자체는 fadeIn/fadeOut, SlideUp/slideDown,

스크롤, 마무리 및 역방향을 포함하여 애니메이션을 구현하기 위한 몇 가지 지침을 제공합니다. 또한 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 }
});

로그인 후 복사

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

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

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

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

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

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

<!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보다 더 좋습니다. 물론 이건 테스트해보지는 않았으니 테스트해보시면 됩니다. .