Browser animation in 2017
// Style: // transition: opacity 1s // transitionを発火する elem.style.opacity = '0'; getComputedStyle(elem); // 終わったら次の画面をactiveにする elem.addEventListener('transitionend', evt => { if (evt.propertyName === 'opacity') { evt.target.remove(); homeScreen.classList.add('active'); } }); /* * でも… */ button.addEventListener('focus', () => { // もしこれがmustacheのようなテンプレート仕組み… render(); }); transitionendが発火されないケース 要
ブラウザーに優しくて、アニメーションを滑らかに
ブラウザーに優しくして、 アニメーションを滑らかに Brian Birtles, Mozilla Japan html5j October 2014, Tokyo Animation is awesome… Source: Christopher Price 2013, http://topherchris.com/post/55109717733 Animation is awesome… Source: icanhasGIF.com windfinder.com earth.nullschool.net healthmap.org/ebola/ 蔓延[まんえん] = spread (disease) ebolavideo.org ウィンドウを最小化する 逆に負担になります。うまくいかなかった冗談みたい。 Animation is awesome? HTC J 端末上の Firefox
Web Animations 1.0 Overview
알아봅시다, Polymer: Web Components & Web Animations
CAKeyframeAnimation
Accessibility View text version Categories Technology Upload Details Uploaded via SlideShare as Adobe PDF Usage Rights © All Rights Reserved Statistics Favorites 0 Downloads 0 Comments 0 Embed Views 0 Views on SlideShare 83 Total Views 83 CAKeyframeAnimation — Presentation Transcript CAKeyframeAnimation2012.08.25ふじしげ ゆういち@nakiwo • ふじしげ ゆういち• @nakiwo• 株式会社フィードテイラー http://feedtailor.jp/ Book+ そら案内 S
Core Animationの話 Part.1
Core Animationの話 Part.1 — Presentation Transcript Core Animationの話 Part.1初めによくある問題2012.05.19ふじしげ ゆういち@nakiwo • ふじしげ ゆういち• @nakiwo• 株式会社フィードテイラー http://feedtailor.jp/ Book+ そら案内 SYNCNEL • ふじしげ ゆういち• @nakiwo• http://www.nakiwo.com/ 洞窟物語 めがね (Mac AppStore) 今日のテーマ• Core Animation• 最初にはまりがちな問題 『アニメーション終了後表示が戻る』• 結論は簡単。過程が複雑• iOS 今日のサンプルhttps://github.com/nakiwo/CoreAnimationSample1 Core Animation• 矩形の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
鉄腕アニメーション
Velocity.js is next generation animation engine.
GitHub - pkluz/PKCoreTechniques: The code for my CoreGraphics+CoreAnimation talk, held during the 2012 iOS Game Design Seminar at the Technical University Munich.
真面目なアニメーション (html5j 2013, Web Animations)