アプリに簡単にリッチアニメーションを実装できるようになる「Lottie」をAirbnbが公開
旅行プラットフォームのAirbnbが、Adobe After EffectsのアニメーションをリアルタムでレンダリングしてiOS・Android・React Native向けのリッチアニメーションにしてくれるライブラリ「Lottie」を開発しました。 Lottie http://airbnb.design/lottie/ Lottie : Airbnb Design http://airbnb.design/introducing-lottie/ Lottieはオープンソースのアニメーション作成ツール。通常はアプリにアニメーションを実装する際、スクリーンサイズに合わせた大量の画像を用意したり何千行ものコードを書いたりする必要がありますが、Lottieはほとんど何もしなくても自動的にAfter Effectsのアニメーションをアプリ用のリッチアニメーションに変換してくれるとのこと。ライブラリ
Power Up Your Animations! 💫
About the content This talk was delivered live in June 2015 at AltConf. The video was recorded, produced, and transcribed by Realm, and is published here with the permission of the conference organizers. Everyone knows how to create simple animations, but what if you want to create awesomely fantastically beautiful animations? Marin Todorov, a team member of raywenderlich.com, shows what you can a
Animated Transitions in Swift / iOS 8
In previous posts I introduced some simple animation techniques in Swift. This post looks at how to you can extend these animation techniques to create your own custom transitions like this… …instead of relying on the handful of default animations that Apple provides1. In the next I look at a more real life example of an animated menu. TL;DR If you want to jump straight in you can download this sa
How to create high-performance CSS animations | Articles | web.dev
Move an element To move an element, use the translate or rotation keyword values of the transform property. For example, to slide an item into view, use translate. .animate { animation: slide-in 0.7s both; } @keyframes slide-in { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } } Use rotate to rotate elements. The following example rotates an element 360 degrees. .animate
auto layoutのconstraintをアニメーションで変更したい - H_Yamaguchiのブログ
最初はこんなふうに実装してたが、これだと意図したとおりにアニメーションが動いてくれない。 [UIView animateWithDuration:1.0f animations:^{ self.menuButtonHeight.constant = 120; self.menuButtonWidth.constant = 120; }]; これが正解。 self.menuButtonHeight.constant = 120; self.menuButtonWidth.constant = 120; [UIView animateWithDuration:1.0f animations:^{ [self.menuButton layoutIfNeeded]; }];
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
Prototyping Animations in Swift / iOS 8
With every release, Apple have been making developer tools easier and more productive to use. Now with Xcode 6 and iOS 8, Apple have created a new programming language called Swift that is not only more powerful, but also has a syntax that designers will probably feel a lot more comfortable with compared to Objective-C. If you’ve ever wanted to learn enough programing to create rich prototypes and
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ
モダンブラウザの普及により、以前に比べるとCSS... / CSSアニメーションライブラリ / Animate.css他...全19件 モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを見ただけでは直感的に分かり辛かったり、自由に使いこなせるには慣れと経験が必要です。 そういった悩みを解決してくれるアニメーションライブラリが存在するのをご存氏でしょうか？ちょっとしたCSSアニメーションであればライブラリを使うことでいとも簡単に組み込むことができます。 そんなありがたーいライブラリを集めました。
jQueryより20倍速い！最強トゥイーンライブラリTweenMaxJS | DECONCEPTER
Flash界最強ライブラリの一角 jQuery animateよりも圧倒的パフォーマンス。Flashの最強アニメーションライブラリTweenMax。JavaScript版があるのはご存知でしょうか。 TimlineMax/Lite TweenMax/Liteの4つのライブラリ群の総称でGSAP JSというパッケージ構成です。※要ライセンス注意（後述） まずはその圧倒的パフォーマンスを体感してください。プルダウンから主要ライブラリを選んで、STARTを押すと右下のfpsの数値が変わります。 GreenSock Animation Speed Test 豊富なアニメーション機能 GSAP JSの主要な機能として下記の物が挙げられます。パララックスなどのインタラクティブなサイトを作る上でもとてもすごく重宝しそうです。 ベジェアニメーション 繰り返し 逆再生 時間指定 一時停止 フレームラベル ゆ
Dev.Opera — CSS3 vs jQuery Animations
IntroductionFlash originally paved the way for us to feature more than just text and images on web pages. It allowed developers to include animations and other rich effects on web pages, leading to a much more colourful and varied user experience. However, Flash was plagued by a number of issues like security, long loading times on mediocre networks, etc. Then came JavaScript libraries like jQuery
ADC OnAir – Adobe Developer Connection提供のUST番組 » 第9回『HTML5 モーションデザインに挑戦！あなたは Edge Animate 派？CreateJS 派？』
ADC OnAirは、Webサイト制作者やアプリ開発者向けのアドビ技術情報サイトADC（Adobe Developer Connection）がお届けするUSTREAM番組です。アドビの新製品情報やWeb関連の技術情報を毎回著名なクリエイターをゲストに迎えて、お伝えしていきます。GUEST ：池田 泰延（ClockMaker.jp）、沖 良矢（ceroan） COMMENTATOR ：上条 晃宏（cuaoar.jp） ASSISTANT ：木下 奈緒（武蔵野美術大学 3年生） MC ：轟 啓介（Adobe Systems） Adobe Creative Cloud & CS6 紹介 発表されたばかりの Adobe Creative Cloud や Adobe Creative Suite 6 の概要を解説します。自分にとってお得なモノか要チェックです。 詳細▶▷ PHotosho
requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの？ 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Redirecting... · objc.io
ronnqvi.st
Table View Animations Tutorial: Drop-In Cards
canvaspod.io
GitHub - facebookarchive/pop: An extensible iOS and OS X animation library, useful for physics-based interactions.
