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

今回は、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 を使用して、単純なテキスト アニメーションを実装しましょう

カスタム アニメーションを実装するには

nbsp;html>


 <meta>
 <meta>
 <meta>
 <meta>
 <title>Document</title>


 <h1 id="segmentfault">segmentfault</h1>
 <script></script>
 <script></script>
 <script></script>
 <script>
 jQuery(function ($) {
 $.Velocity.RegisterEffect(&#39;custom&#39;, {//注册一个叫&#39;custom&#39;自定义动画
 defaultDuration: 1500,
 calls:[
  [{
  rotateY: 360,
  translateY: &#39;-=15&#39;,
  }, 0.5],
  [{
  translateY: &#39;+=15&#39;,
  }, 0.5]
 ], 
 })
 $(&#39;#J_Text&#39;).css({
 fontSize: 40,
 color: &#39;#333&#39;,
 }) .html(function () {
  return $(this).text().split(&#39;&#39;).map(function (char) {
 return &#39;<span>&#39; + char + &#39;&#39;; //让每字符被span元素包裹
 }).join(&#39;&#39;);
 }).find(&#39;span&#39;)
 .filter(function (index) {
 return index > 6
 }).css(&#39;color&#39;, &#39;#009A63&#39;).end() //让后面几个字符变为绿色
 .css({
 position: &#39;absolute&#39;,
 left: function (index) {
  return index * 20; //设置字符的间隔
 }
 })
 .velocity(&#39;custom&#39;, { //调用自定义的动画指令
 stagger: 300,
 delay: 1000, 
 })
 })
 </script>

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

。 最後に

アニメーションによる内部の速度 パフォーマンスの点で最適化されているため、パフォーマンスはjqueryのアニメーションよりも優れており、CSSのトランジションよりもさらに優れています。もちろん、私はこれをテストしていませんが、テストすることができます。それ。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ライブブロードキャストプラットフォームのナビゲーションを作成するためのjquery+css3

マウス応答型淘宝アニメーション効果の実装

jqueryを使用して虫眼鏡効果を作成する方法

以上がveloticy-ui を使用してテキストアニメーションを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。