アニメーションの実装をしたいけどどうすればいいかわからないデザイナー、エンジニアへ - Qiita
Hamee Advent Calender 2018 の12日目の記事です。 今年行われたAdobe MAX 2018でのマイクロインタラクションのセッションに大いに影響を受けたので布教がてら、その一部の内容&自分なりに調べた、試した+αでお届けします。 （※詳細な扱い方などは全く説明していないのでご注意ください） 粋なアニメーション、作りたいよね。 マイクロインタラクション is 何 頑張って日本語で表すのであれば「小さな（micro）相互（inter）作用（action）」といった感じにでもなるんでしょうか。 超雑に説明すると、よく言う、神は細部に宿る、というやつです。 例のオライリー本では「単一のシナリオに基づいて一つの作業だけをこなす最小単位」とか言われています。 ボタンを押して「いいね！」をするのも「お気に入り」をするのも「ストック」をするのも、みんなみんな、マイクロインタラクシ
Twitter's "fave" animation - CSS Animation
Twitter recently updated the design of their “fave” (also known as “fav”) button, introducing a new animation. Rather than rely on CSS transitions, the animation makes use of a series of images. Here’s how to recreate the animation using the CSS animation steps timing function. Update: Heart The following technique can also be used with the new “Heart” animation, as it’s handled in a similar way:
Twitter の「お気に入り」アニメーション - CSS Animation
Twitter の「お気に入り」アニメーション 最近 Twitter は「お気に入り」(「ふぁぼ」としても有名) のデザインを変更、新しいアニメーションを取り入れました。 CSS transitions よりも、アニメーションは画像の羅列を活用できます。 そこで、 アニメーションを CSS animation の steps timing function を用いて作り直す方法を示します。 動きの錯覚 その効果は、円筒の周りに順番に絵が出てくる、昔の回転覗き絵と似ています。 円筒の代わりに、私たちは要素の中に平らな画像の羅列を表示します。 デモ 星をホバーしてアニメーションを見られます: この例ではアニメーションを構成する画像の羅列を作ることから始めます。 今回は、 Twitter のお気に入りアニメーションの画像のセットを使います。 このフレームをアニメーションするために、私たちはフレー
【iOS】Pinterest風な遷移アニメーションをオープンソースとして公開しました | Recruit Tech Blog
概要 UIViewController間の遷移アニメーションを、Pinterestのようなズームするアニメーションにするライブラリをオープンソースとして公開しました。前回オープンソースを紹介したときはyshrkt氏のゴーストライターでしたが、今回は自分で書いたコードですｗ recruit-mp/RMPZoomTransitionAnimator | GitHub We published RMPZoomTransitionAnimator by open source. RMPZoomTransitionAnimator provide a custom transition zooming animation. PinterestやFacebook、Twitterなどのアプリで、一覧画面で写真のサムネイルをクリックするとサムネイルが拡大しながら詳細画面に遷移するアニメーションをご覧になっ
[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。 さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定 まずは、コアとなるフレームを作成します。この中に
![[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/24728443d0a7001537016b0816df756534c67040/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040301.png)
capptivate.co is coming soon
is a totally awesome idea still being worked on. Check back later.
[iOS] たった２行でTweenアニメーションを実装できるコードを公開。
先日、こんな記事が話題になっていましたね。 職人が教える！iOSアプリ開発で使いこなしたいとっておきのOSS 第1回 様々なアニメーションを実現するiOSアプリ用トゥイーンライブラリ3種を比較！ 実はTweenという言葉すら初耳だった程度の知識なのですが、この記事を読んでサンプルコードをいじってみました。 ですが、正直どれも使い方が複雑で使いづらいなぁ。。という印象でどうにかならないものかな？と。 もちろん、本格的なTweenを実現するには多少複雑になってしまうのは分かるのですが、実際に使うとなるとそこまでの機能は必要ない場合の方が多いんじゃない？ってのが今回のコードを用意したきっかけ。 そこで、上記記事であげられていたライブラリを参考に、もっと簡単に使えるTweenアニメーション用コードを書いてみましたので、ご参考まで。 ツッコミ大歓迎です！ 今回のコードを使えば、アニメーションしたい所
![[iOS] たった２行でTweenアニメーションを実装できるコードを公開。](https://cdn-ak-scissors.b.st-hatena.com/image/square/b286b32eb7451bce46cf13730cd00b8a5c15d5c1/height=288;version=1;width=512/https%3A%2F%2Fsecure.gravatar.com%2Fblavatar%2Fc6db5e287299371a2e2c1d2a735fcf1a9b853fa57afd52fdfd8189b72dc54794%3Fs%3D240){kind=avatar}
第1回 様々なアニメーションを実現するiOSアプリ用トゥイーンライブラリ3種を比較！ | gihyo.jp
はじめに iOS SDK登場から早4年近くが経ち、使い回しの効くUIコンポーネントや、煩雑な手順を楽にするスクリプト、自作するには難易度の高い技術をライブラリ化したものなどなど、今では多くの便利なオープンソースソフトウェアが公開されています。 本連載ではそんなオープンソースソフトウェアの中で、有用かつあまり日本語での情報が少ないものを中心にご紹介していく予定です。具体的な使用方法や、ソースの内容にも踏み込んで解説していきますので、ぜひ皆様の日々の開発にお役に立ていただければ幸いです。 トゥイーンライブラリを使用するメリット UIViewのアニメーションで指定できるイージングの種類は、 UIViewAnimationOptionCurveEaseInOut UIViewAnimationOptionCurveEaseIn UIViewAnimationOptionCurveEaseOut U
jQuery Easing Plugin
Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). All done with a straight animate call, no need to specify the animation type at all. Select easing types for the demo first one for down, second one for up. Then click the clicker. Updates 12/11/07 1.3 jQuery easing now supports a de
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
