헤더를 뽑을 때의 승강 애니메이션

9153 단어 Android

계기.

  • 버튼을 눌렀을 때 애니메이션이 맥동(파문처럼 확장된 효과)만 있으면 외로운 화면이 나오기 때문에 뭘 더 넣고 싶어요.
  • 파문과 병용할 수 있는지 조사한다.소재 디자인액션에 애니메이션이 있는데 버튼을 눌렀을 때 뜨게 (승강)해서 제가 한번 해봤어요.
  • 상호작용 디자인을 실현하고 싶다
  • 동작 이미지

  • 헤드셋 설치 시 CardView 업스트림 애니메이션
  • pic.twitter.com/i0SVmJLRg9 — yst.i (@yst_i) 2018년 2월 26일


    컨디션


    • Android Studio 3.0.1
      • support Library Version = '25.4.0'

    • Loop 이후(API21 이상)



    Implementation





    res/animator-v21/lift_on_touch.xml

    
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item // クリックされた時にZ軸を8dp移動するアニメーションを200mm実行する。
            android:state_enabled="true"
            android:state_pressed="true">
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="@dimen/dimen_8dp"/>
        </item>
        <item>
            <objectAnimator             android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="0dp"/><!-- default -->
        </item>
    </selector>
    





    res/layout/HogeActivity.xml

        <android.support.v7.widget.CardView
            android:id="@+id/lift-on-tap"
            cardUseCompatPadding="true" // lolipop未満でshadowを表示する
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/dimen_8dp"
            android:clickable="true"
            android:foreground="?android:attr/selectableItemBackground" // リップル
            android:stateListAnimator="@animator/lift_on_touch.xml" //タップ時のアニメーションを指定
            tools:targetApi="lollipop"
            >
    




    그게 다야.




    재현 가능합니다.






    実装はわかったので、他のアプリの使用状況を調べてみます(好きなアプリから選んでます





    • FRIL


      • 눈에 띄는 곳에서는 사용하지 않은 것 같다.(부분 사용)

    • Google Play

    • Play Books

    • Eventbrite Organizer (Material Design Award 2017)


    • NPR One (Material Design Award 2017)


      • 사용할 곳을 찾지 못했습니다.고개를 돌릴 때 마치 맥동이나 애니메이션으로 상호작용을 표현하는 것 같다.
      • 프로젝트 간의 공백이 좁은 디자인으로 발차기 시 확장된 shoadow 애니메이션은 사용하기 어렵다.




    他のアプリの使用状況(独断と偏見まみれ)


    • 승강기 애니메이션을 거의 사용하지 않는 것 같다
    • 공백이 좁은 디자인은 shadow를 확장하는 동작과 맞지 않을 수 있습니다.
    • 상호작용 표시도 디자인이나 레이아웃으로 인해 효과가 없을 수 있다.



    せっかく作ったので


    • 디자이너에게 보여주세요.처음에는 효과를 눈치채지 못했다
    • 잠시 공백이 넓은 단추로 사용합니다.
    • 다만, 언제든지 원상태로 회복할 수 있다.(최종 판단은 디자이너에게 있다.



    終わりに


    • Lolipop을 통해 간단한 리프트 애니메이션을 만들 수 있습니다.
    • 화면 디자인에 따라 상반되는 효과가 있을 것 같다.
    • 그렇게 생각하지 않고 상호작용 디자인에 깊이 들어가기를 바랍니다.나쁘면 환원해.



    CardViewのおまけ




    카드는 그림, 텍스트 및 단일 테마 링크를 포함할 수 있습니다





    参考記事



    좋은 웹페이지 즐겨찾기