高機能なモーション制作用JSライブラリGSAP/TweenMaxを使ったタイムリマップ表現 | ICS MEDIA
皆さんはHTMLでモーションを作るときにどのトゥイーンライブラリを使用していますか？ GSAP（グリーン・ソック・アニメーション・プラットフォーム）は、Flash全盛時代から存在する歴史あるトゥイーンライブラリです。 GSAPはCSS/HTML Canvas/WebGLなどさまざまなアニメーション作成に利用できます。類似トゥイーンライブラリよりも高機能であり、かつ実行パフォーマンスも優れているのが魅力的です。GSAPの詳しい使い方は次の記事で解説しているので、使い方を知りたい方は以下の記事から参照ください。 GSAP入門（前編） - 基本的な使い方 GSAP入門（後編） - タイムライン機能など この記事では、GSAPのタイムスケールという機能を中心に解説します。 作成したモーションデモを紹介 今回はGSAPの機能の1つ「タイムスケール」を使って、3Dの表現を試してみました。まずは次の2つ
SVGのpathを使ったモーションパスアニメーションの実装方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです 今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。 【こちらもおすすめ】 ☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方法 SVGのpath要素 path要素を使うことで、好きな図形を描くことができます。 Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。 d=”M 50,50 L 200,50 Z” SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。 pathを描画するためのコマンドは下記があります
「Legend - Animate Text in Video gif」文字が動くアニメーションGIFを作成できるアプリが面白い！ - Apple Life
操作方法 アプリを起動すると、テキストの入力画面になります。動かしたい好きな文字を入力してください。 カメラを起動して撮影するか、保存している画像を呼び出すか、Flickrで画像を検索し、背景画像を設定します。（背景画像なしでもOKです） 完了したら、右上の「次へ」をタップすると、いくつかのパターンのアニメーションGIFが作成されます。 「次へ」のタップの後、18種類のアニメーションが作成されます。好きなものを選んでタップしてください。 アニメーションを決めると次は、文字や背景のカラーパターンを選んで決めます。 カラーパターンが決まれば、そのままSNSでシェアすることができます。 （今回はiPhoneの保存方法をご紹介） 下の列にある「GIF」をタップします。 このままカメラロールに保存したいのですが、項目がないので私は「LINE Keepに保存」からGIFを保存します。 LINE Kee
React Native Animations Using the Animated API
Looking to learn React Native? Check out React Native Training. The recommended way to animate in React Native for most cases is by using the Animated API. The final github repo for this project is here. There are three main Animated methods that you can use to create animations: Animated.timing() — Maps time range to easing value.Animated.decay() — starts with an initial velocity and gradually sl
コピペで簡単！アニメーションを使ってはてなブログを超おしゃれにするカスタマイズ術 - ひつじの雑記帳
今まで様々なブログを見てきて、はてなブログはWordPressのブログに比べてアニメーションを使っているものが少ないなと感じる場面が何度かありました。おそらく、「必要性を感じてないから使ってない」わけではなく、「やり方がわからないから使ってない」ひとがほとんどだと思います。場面によってアニメーションはものすごく重宝されるものであるのに、「知らないから」で済ませてしまうのはすごく勿体なく感じます。 そこで今回は、誰でも簡単に文字や画像にアニメーションをつける方法とアニメーションを使ったはてなブログの応用カスタマイズ例を紹介しようと思います。後者については、実践しているひとを滅多にみないので自分のブログにオリジナル性を出したいという方は是非参考にしてみてください。 スポンサードリンク そもそもアニメーションとは はてなブログで誰でも簡単にアニメーションをつける方法 導入方法 その１ その２ ア
アニメーションの調味料「イージング」の使い分けレシピ (透明度、UI、音量) - feb19
アニメーションの調味料「イージング」の使い分けレシピ (透明度、UI、音量)date2016.12.1(Thu.)tagsflashactionscript この記事は FLASHer Advent Calendar 2016 1日目の記事です。 FLASHer とはAdobe Flash (現 Adobe Animate) を使用している / 使用していたデザイナー、エンジニアの総称です。Flasher はそのまま訳すと「露出狂」という意味があります。 2016 年現在、前者 GEEK 民族の浄化が行われたので、インターネットで検索をかけると本来の意味での露出狂の画像が見ることができます。会社で検索をかけるのは気をつけて下さい。(なお、本当に露出していた伝説の FLASHer がいます。気になる方は Flasher 露出 で検索) なぜ FLASHer である GEEK 民族浄化が起きた
どれを使う？プロトタイピングツールの特徴・使用感まとめ - ぐるなびをちょっと良くするエンジニアブログ
こんにちは！ かつ、はじめまして！ わたくし、デザイナーのピエール高木と申します。 埼玉生まれ・J-POP育ち、悪そうなやつにはだいたいビビッてました。 どうぞよろしくお願いします！！ お初の投稿になりますが、デザインやコンセプトの面白いサービス&アプリ、気になるツール、参加したイベントなど幅広くお伝えできればと思っています。 今回のテーマは【プロトタイピングツール】。 はじめに・プロトタイピングツールとは 昨今ではデザイナーに求められることが増えつつあります。 ディレクターやエンジニアに対して、プロダクトの画面遷移や動きのイメージを伝えること （特にネイティブアプリなどの案件で）プロジェクトの早い段階から実装に近いイメージを作ること 修正による無駄な開発リソースを削減すること ・・・ そんな中増えてきているのが、高度なプログラミングなしでプロトタイプが作成できる「プロトタイピングツール」
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」をリリース - ICS MEDIA
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ 「アニメ画像に変換する君」をリリース GIF画像に変わり得る新世代のアニメーション画像形式として、APNG（エーピング）とWebP（ウェッピー）があります。それらの画像ファイルを簡単に作成できるデスクトップアプリケーション「アニメ画像に変換する君」を弊社が開発し、無償でリリースしています。 ▲ デスクトップアプリケーション「アニメ画像に変換する君」 主な用途としてLINEアニメーションスタンプの制作に利用できます。LINEアニメーションスタンプはAPNG形式が採用されており、Adobe AnimateやPhotoshop等のソフトで制作したアニメーションをAPNG形式に変換する必要があります。 このアプリケーションを使えば、簡単な手順でLINEアニメーションスタンプ用のAPNG形式に変換できます。 ▲「アニメ画像
【SVG】raphael.jsを使ったらすんごい色々捗った | ユガラボ
こんにちは、ユーリです！ 少し前、SVGでアニメーションを行う記事を書きましたが、 その後の開発でブラウザ間の挙動の違いや、古いブラウザでうまく動かなかったりと色々と苦労いたしました。 うおー、やはり一定数の古い環境は切り捨てるしかないのかッ…！対応コードを書けば書くほど煩雑になってゆく！ そこに現れた救世主！！ SVG制御用ライブラリ… Raphael.js っ！！ ↓さんぷる 自前のコードだけでの対応に限界を感じ、ライブラリを使用してめんどくさいところは全部吸収してもらうことにしました。 まさにうってつけのライブラリが見つかりました！ それがraphael.jsでございます。 raphael.jsのココがスゴイ！ ■IEやsafqriの古いバージョンでも動作 特に何も意識せずとも、raphael.jsからの処理を使ってSVGを操作すれば、古いブラウザでもしっかり表示され、animate
try! Swift - Advanced Graphics with Core Animation
The document provides an overview of animation techniques in iOS, including UIView animations which use animatable properties like frame and alpha, CoreAnimation which allows for more control over animations through layers and properties like zPosition, and resources for learning animation such as Apple documentation, WWDC talks, and sample code projects. The document also discusses implicit and e
SVGのPathをアニメーション化してくれる大人気jQueryプラグイン「DrawSVG」
Pathを書こう 基本的なPathの動きは全てHTMLに書かれている。 以下のHTMLタブを参考にしてみるといいだろう。 シンプルな使用法 See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. スクロールでPathを移動する。 See the Pen Draw on scroll by Leonardo Santos (@lcdsantos) on CodePen. イメージのMaskPathをアニメーション化する。 See the Pen Animate mask path by Leonardo Santos (@lcdsantos) on CodePen. その軽さ2キロバイト以下という軽量化ぶり。1年前は1キロバイト以下だったんだけども、少しずつ機能が追加されていますね。それでも十分な軽さです。 お
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
高度なアニメーションパス(Advanced animation path)作成 | 「SVG(画像効果)」カテゴリー | JavaScriptデモ
概要 高度なアニメーションパス(Advanced animation path)作成 ・アニメーションのためにJavaScriptトゥイーンエンジンtweenjsを使用 依存ライブラリ ・tweenjs tween.jsとは？ ・CreateJSに含まれるJavaScriptトゥイーンライブラリ 基本的な仕組み ・アニメーションループ ・requestAnimationFrameで、tweenjsのupdateメソッドを定期的に呼出 //アニメーションのloop実行定義 animate = function(){ requestAnimationFrame(animate) TWEEN.update() } //アニメーションループ開始 animate() Link 動作確認 ・デモ 公開ページ ・Advanced animation path
Animate.cssとwow.jsを使ってサイトにアニメーションをつける - Qiita
初めに Animate.cssとwow.jsを使って自身のサイト(tiwuofficial.github.io)にアニメーションをつけてみたので、使い方を簡単に書いていきたいと思います。 tiwuofficial.github.io 次回記事 Font-Awesomeを使ってサイトにアイコンを表示させる + Animate.css + wow.js 1.準備 Animate.cssは要素のclassにアニメーションを指定するだけで、簡単にアニメーションを実装することができるスタイルシートです。 公式サイト GitHub 公式サイトではアニメーションの動きの確認ができます。 公式サイトからanimate.cssファイルをダウンロードしてください。 (animate.min.cssでも可)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://vdeep.net/wp-content/uploads/2015/05/ios-spring.png