タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。このライブラリを筆者が開発しているのですが、今年4月に公開したところ大変好評いただきました。 たくさんの要望もいただき、新しい機能を追加したのでアップデート内容を紹介します。今回はアニメーション制作において必要度の高い機能追加をメインに、各機能のブラッシュアップを行っています。 基本的な使い方や導入方法は、前回の記事「新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました」をご覧ください。 今回のアップデート内容 新機能：トゥイーンを繰り返すloop() 新機能：トゥイーンを連続で遅延させるlag() 遅延させ
ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 CSSアニメーションとの違い CSSのtransitionプロパティや@keyframesを使ったアニメーションなどがあります。これらは比較的手軽にアニメーションを実装できるのがメリットです。手軽さとは引き換えに複雑なアニメーションや動的に変数が変わるようなアニメーションが苦手です。一方でJavaScriptを使った手法は、複雑なものや動的なアニメーションも実装できるメリットがありますが、CSSと比べると記述量も
単なるアニメーションにとどまらない！条件分岐やイベント待機など「Tween24.js」の新機能 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。筆者が開発を続けており、今回の2021年8月アップデートでは条件分岐やイベント待機など、アニメーション作成をより柔軟にするための機能追加がメインとなっています。 基本的な使い方や導入方法は、記事「新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました」をご覧ください。 今回のアップデート内容 新機能：トゥイーンを条件分岐させるifCase() 新機能：イベントを受け取るまで待機するwaitEvent(), waitEventAndFunc() 新機能：途中で次のトゥイーンへ移行するjump() 新機能：親トゥイーンを進める
CSSフィルターやクリッピング、タイムスケールなど！ 表現の幅を広げる「Tween24」の新機能 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。筆者が開発を続けており、2022年3月に正式リリースをしてからも機能追加のアップデートを重ねて、バージョン1.4となりました。 この記事ではバージョン1.1〜1.4で追加された機能について紹介します。バージョン1.0のリリースから下位バージョンとの互換性があるため、すでにお使いの方もそのまま利用いただけます。 基本的な使い方や導入方法を知りたい方は、記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 バージョン1.1〜1.4の主なアップデート内容 新機能：トゥイーンを繰り返すrepeat()
アニメーションライブラリ「Tween24.js」正式リリース！ 相対値や曲線移動などバージョン1.0の新機能 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。筆者が開発を続けており、今回の2022年3月のアップデートでは6つの新しい機能を追加し、バージョン1.0として正式リリースとなります。 正式リリースでメジャーバージョンが変わりますが、仕組みの変更はなく下位バージョンとの互換性があるため、すでにお使いの方もそのまま利用いただけます。 基本的な使い方や導入方法を知りたい方は、記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 今回のアップデート内容 新機能：曲線的に座標移動させるbezier() 新機能：設定時からの相対値でトゥイーン
前回の記事で、DOTweenとは何か？他のTweenアセットとの比較や、Unity標準のアニメーションシステムであるMecanimとの比較について解説しました。 DOTweenとは？Mecanim(Animator)との違いTweenアセットとは何なのか？その中でもDOTweenを選ぶ理由と、Unity標準のアニメーション機能であるMecanim(Animator)との使い分けについて解説していきます。...
【Unity】ECSで実装されたトゥイーンライブラリ「Magic Tween」を公開しましたUnity2023年9月9日2023年9月9日 現在はv0.1.0ということで実験的なライブラリ、という位置付けではありますが、機能面に関してはGameObject/ECSの両方をサポートし、Sequenceの機能やTextMesh Proのサポートなど、非常に豊富な機能を取り揃えています。また、性能に関してもUnity向けのトゥイーンライブラリとしては最速クラス(というか圧倒的に最速)になっています。そのため、実用性に関しては今の時点でも十分即戦力になり得るライブラリになっているのではないでしょうか。 ただ、諸事情により公開を前倒ししたので、内部の設計がちょっと、というかそれなりにヤバめな雰囲気を醸し出しています。というか、うん、ヤバい。 そんな感じなので、ECSのサンプルとして中身覗くのはお勧め
概要 MissingReferenceException: The object of type 'XXXX' has been destroyed but you are still trying to access it. Your script should either check if it is null or you should not destroy the object. DOTween を使っているシーンで他のシーンに遷移する場合は Tween を破棄しないと上記のようなエラーが発生します using DG.Tweening; using UnityEngine; public class Example : MonoBehaviour { private void Awake() { transform .DOMoveX( 1, 1 ) .SetLoops( -1
JavaScript で Tweenアニメーションが扱えるライブラリを調べてみると、よく出てくるものがいくつかあります。 今回の記事では、調べてよく出てくるライブラリの中の1つである「anime.js」を使い、「p5.js」で Tweenアニメーションを試してみた、という話です。 他の Tweenアニメーション用JavaScriptライブラリと p5.js を組み合わせた事例 anime.js を試していく前に、他の Tweenアニメーションが扱えるライブラリと p5.js を組み合わせた事例が既にあるので、以下に記載してみます。 GSAP ●GSAP Basic - OpenProcessing https://openprocessing.org/sketch/1227453 こちらは GSAP というライブラリとの組み合わせです。 p5.js と組み合わせて使う場合の書き方は、以下の
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
