androidの新しいインタラクション
ネットに浸かった日は2014-10-18 00:21に発表されました
1358
回読
アニメーション(Animation)
0
Androidでは、日付の選択、ファイルの選択、場所の選択など、何かを選択する機能がよくあります.通常、私たちのやり方は、日付の選択にdatepickerを使用したり、activityを使用したりすることがありますが、この2つの方法には、ユーザーがインタフェース間の切り替えを明らかに感じているという欠点があります.場合によっては、次のようなデータの選択のインタラクションがより良いはずです.
実は上のアプリの効果はCapitaineTrainアプリから来ていて、列車に乗るアプリのようですが、このアプリの作者もこの効果をブログで紹介し、同時にこの効果を実現するソースコードを開放しました.本文は作者のあの博文の基礎の上で書いたのです.
私は直接翻訳していないで、この中の構想が比較的に複雑なため、私は作者の意味を理解していないで、私は原文の下の多くの評論を見ても自分が作者の意味を理解していないと言って、作者自身がはっきり述べていないと思います.自分が作者のソースコードに基づいてdemoを実現した後、私は自分の理解について書きます.文章の最後に私は原文の住所とコードのダウンロードの住所を貼ります.
上の写真では、「日付を選択するbutton」をクリックすると、日付選択画面が徐々に表示され、「日付を選択するbutton」は徐々に一番上の位置に移動し、「日付を選択するbutton」の下の部分は徐々に下に移動し、透明度が低く消えるまでの過程があります.アニメーションが終了すると、[日付のbuttonを選択](Select Date button)と日付選択インタフェースのみが残ります.プロセス全体はインタフェース上のすべての要素が一定の規則に従って現れるインタフェースに空間を譲るように、過度に自然で、また、異なる位置の選択コントロールによってトリガされる上下平行移動アニメーションは異なり(例えば、選択コントロール自体が上部にある場合、コントロールは上に移動するアニメーション効果はありません)、非常に柔軟で、ユーザーは2つのインタフェースを切り替える過程で、構想が緊密に関連しています.
海外の開発者だけがこんなに細心の注意を払っているのかもしれない.
効果を説明したら、ソース構造を見てみましょう.
ここでFormAnimatorDemoActivity.JAvaは私が自分で追加したプレゼンテーションの例です.作者自身の例が目まぐるしいからです.
MainWithAnimatorActivityとMainWithoutAnimatorActivityは、それぞれこの効果の2つの実装方法です.アトリビュートアニメーション方式と一般的なグラデーションアニメーション方式です.グラデーションアニメーションの効果は非常に理想的ではありませんが、彼の具体的なコードは実現の論理を理解するのに役立ちます.
CustomAnimatorは、アトリビュートアニメーション方式で実装されるコアコードであるカスタムアニメーションクラスです.
Positionsは、いくつかのカラムの異なるオブジェクトのプロパティをカプセル化します.
PositionType Evaluatorは、属性アニメーションのカスタム推定方法であり、この概念は属性アニメーションの使い方を参照します.
アトリビュートアニメーションを使用するには、次の3行のコードを使用します.
animator.setAnimatorViews(mMainContainer, localfrom, mFirstGroup, Arrays.asList(new View[]{mSecondGroup,mFirstSpacer,mThirdGroup}), null, mEditModeContainer, Arrays.asList(new View[]{}));
animator.prepareAnimation();
animator.start();ここでanimatorの定義は次のとおりです.
private CustomAnimator animator = new CustomAnimator();ここで一番わかりにくいのは
animator.setAnimatorViews 7 ， 7 ， ， CustomAnimator 。です CustomAnimator setAnimatorViewsの :
public void setAnimatorViews(ViewGroup mainContainer, View focusedView, View focusedViewContainer, List<View> fadedOutToBottomViews, View stickyTo, ViewGroup editModeView, List<View> slideToTop)
mainContainer:レイアウト の コンテナ.
focusedView:クリックされたコントロール、すなわち した コントロール.focusedViewContainer:focusedViewの コンテナ.fadedOutToBottomViews:アニメーション に まで えてしまうviewリスト
stickyTo: をしているのか からない.editModeView: の インタフェース.slideToTop:アニメーション に のviewリストにスライドします.
ここで が いたいのはapi という では、 が したのはまずいということです.しかし、これも もコードを し、 が アニメーションを する で くのテクニックがあります.
ここで、mainContainer、focusedView、focusedViewContainer、editModeViewの4つのパラメータが です.しかし、fadedOutToBottomViews slideToTopは に の は に されます. にはfadedOutToBottomViews slideToTopリストの で にどのviewが かは、 が のUIの に づいて することにかかっています. の はここまでで、コードを く していません.
:http://www.cyrilmottier.com/2014/05/20/custom-animations-with-fragments/ ， demo gif ， demo， demo ， demo ： https://git.mika-dev.com/Mika/custom-animations-with-fragment
また をより に るためにgif のレイアウトを て でdemoを りました
http://download.csdn.net/detail/jianghejie123/8102407