veloticy-ui を使用してテキストアニメーションを生成する方法-jsチュートリアル-php.cn

veloticy-ui を使用してテキストアニメーションを生成する方法

php中世界最好的语言

リリース： 2018-03-14 17:38:48

オリジナル

1493 人が閲覧しました

今回は、veloticy-uiを使用してテキストアニメーションを生成する方法と、veloticy-uiを使用してテキストアニメーションを生成する際の注意点について説明します。実際のケースを見てみましょう。

はじめに

最近、テキストの波線のような効果を実現したいと思い、アニメーションライブラリのvelocity-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 自体は、FadeIn/fadeOut、slideUp/slideDown、scroll、finish、reverse などのアニメーションを実装するための命令を提供します。トランスフォームやカラーなどの属性アニメーションのサポートを実装し、SVG と Promise をサポートします。具体的には、上記のリンク先のドキュメントを使用してください。 velocity-ui より多くの命令を提供することに加えて、RunSequence と RegisterEffect の 2 つのメソッドも提供します (非 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 }
});

ログイン後にコピー

上記 2 つの関数に加えて、3 つのメソッドも提供します追加のオプション属性

stagger を使用すると、コレクションオブジェクトが一定期間アニメーションをずらすことができます

drag を使用すると、コレクションオブジェクトの最後の要素にバッファリング効果を与えることができます

backwards を使用すると、コレクションオブジェクトを一定期間前方にずらすことができます最後の要素アニメーションを実行します

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>

ログイン後にコピー

いくつかのキャラクター操作を削除すると、一見複雑なアニメーションを実装するために必要なのは単純に呼び出しを設定するには、stagger 属性の値で十分です。実際、このアニメーションは 1 回だけ実行されます

。最後に