Adobe XDをもっと使いこなすヒント! 第55回 自動アニメーションの基本仕様を押さえる

by akihiro kamijo

Posted on 09-24-2020


Adobe XDをもっと使いこなすヒント!

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、自動アニメーションの基本仕様を紹介する9つのツイートを紹介します。

Tip 1. 自動アニメーションを利用できる場所

#AdobeXD #ProTip Auto-animate will animate between two objects with the same name. Simply duplicate your artboard (or copy from one to another), then set the transition to auto-animate; any property differences between the two will animate seamlessly. @AdobeXD

— Elaine Chao (@elainecchao) August 11, 2020


#AdobeXD #ProTip Auto-animate also works between states in components, leading to interactive, animated, reusable controls. @AdobeXD

— Elaine Chao (@elainecchao) August 12, 2020


Tip 2. アニメーションの移動速度

#AdobeXD #ProTip Objects will animate to their “after” state in the same period of time, so those further away from the origin will travel faster than those that are closer. @AdobeXD

— Elaine Chao (@elainecchao) August 13, 2020


Tip 3. アートボード外から登場するアニメーション

#AdobeXD #ProTip After you’ve connected two artboards using auto-animate, you can then drag objects off the artboard to have them animate from off-screen. @AdobeXD

— Elaine Chao (@elainecchao) August 20, 2020


#AdobeXD #ProTip You can cascade your animations by adjusting the distance between the start and end location. This could mean dragging your objects really far away from your artboard. @AdobeXD

— Elaine Chao (@elainecchao) August 20, 2020


#AdobeXD #ProTip Access your off-screen elements in prototype mode by selecting any object on the artboard. If you don’t have any objects on the artboard, you can select an element from the layers panel. @AdobeXD

— Elaine Chao (@elainecchao) August 21, 2020


Tip 4. 自動アニメーションのトリガーの種類

#AdobeXD #ProTip Combine auto-animate with timed transitions (and easing!) to create more nuanced animations that better reflect the experience you want. @AdobeXD

— Elaine Chao (@elainecchao) August 14, 2020


#AdobeXD #ProTip Use auto-animate with a drag trigger to create animations that move with a click/drag or a touch/drag. @AdobeXD

— Elaine Chao (@elainecchao) August 17, 2020


#AdobeXD #ProTip Use a voice trigger to kick off your interactions. To preview, hold down the space bar when you say the key word. @AdobeXD

— Elaine Chao (@elainecchao) August 18, 2020




Topics: クリエイティブ, UI/UX & Web, UI / Web デザイン