Android Material Design 사용자 정의 애니메이션 작성 에 대한 자세 한 설명
구체 적 으로 다음 과 같다.
애니메이션 은 Material 디자인 에서 사용자 와 app 의 상호작용 에 그들의 동작 행 위 를 피드백 하고 시각 적 일관성 을 제공 합 니 다.Material 테 마 는 Buttons 와 Activity 의 과도 에 기본 애니메이션 을 제공 합 니 다.안 드 로 이 드 5.0(api 21)이상 에서 이 애니메이션 을 사용자 정의 할 수 있 습 니 다.
대부분의 경우 view 의 xml 정의 에서 배경 을 정의 해 야 합 니 다.
기본 터치 피드백 색상 을 바 꾸 기 위해 RippleDrawable 대상 에 게 색상 을 지정 할 수 있 습 니 다.테마의 android:colorControl Highlight 속성 을 사용 할 수 있 습 니 다.
Use the Reveal Effect 디 스 플레이 효과 사용
View Animation Utils.createCircular Reveal()방법 은 보 기 를 순환 적 으로 표시 하거나 숨 길 수 있 도록 합 니 다.
표시:
// previously invisible view
View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
// get the final radius for the clipping circle
int finalRadius = myView.getWidth();
// create and start the animator for this view
// (the start radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
anim.start();
// previously visible view
final View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();
// create the animation (the final radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
myView.setVisibility(View.INVISIBLE);
}
});
// start the animation
anim.start();
Customize Activity Transitions Activity 의 과도 애니메이션 정의사용자 정의 전환 사용자 정의 과도 애니메이션 지정
우선 테 마 를 정의 하 는 style 에서 android:windowContentTransitions 속성 을 사용 하고 transitions 를 사용 해 야 합 니 다.사용 할 Transitions 도 정의 할 수 있 습 니 다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="@android:style/Theme.Material">
<!-- enable window content transitions -->
<item name="android:windowContentTransitions">true</item>
<!-- specify enter and exit transitions -->
<item name="android:windowEnterTransition">@android:transition/explode</item>
<item name="android:windowExitTransition">@android:transition/explode</item>
<!-- specify shared element transitions -->
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item name="android:windowSharedElementExitTransition">@android:transition/slide_top</item>
</style>
</resources>
주:모든 transition xml 에서 정의 하 는 것 은 change 요소 입 니 다.코드 에서 transitions 사용 하기:
// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// set an exit transition
getWindow().setExitTransition(new Explode());
transitions
Window.setEnterTransition()
Window.setExitTransition()
Window.setSharedElementEnterTransition()
Window.setSharedElementExitTransition()
transitions 과 도 를 빨리 진행 하려 면 Activity 에서 Window.setAllowEnterTransition Overlap()를 호출 할 수 있 습 니 다.transitions 를 사용 하여 액 티 비 티 를 시작 합 니 다.
transtions 를 사용 하고 Activity 의 끝 exit transtion 으로 설정 하려 면 다음 과 같은 방식 으로 다른 Activity 를 시작 하면 활성 화 됩 니 다.
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
다른 Activity 에 enter transtion 을 설정 하면 시작 할 때 활성 화 됩 니 다.disable transitions 를 사용 하려 면 다른 Activity 를 시작 할 때:
startActivity(intent,null); // null options bundle
Start an activity with a shared element 공유 요소 로 Acitvity 시작 하기1.테마 에서 window content 사용 하기
2.style 에서 공 유 된 과도 transitions 를 정의 합 니 다.
3.transitions 의 xml 자원 을 정의 합 니 다. res/transition
4.layot 에서 android:transition Name="3 단계 에서 정 의 된 이름 을 호출 합 니 다.
5.Activity Options.makeSceneTransition Animation()을 호출 하여 해당 하 는 Activity Options 대상 을 생 성 합 니 다.
// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);
// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);
// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(this, Activity2.class);
// create the transition animation - the images in the layouts
// of both activities are defined with android:transitionName="robot"
ActivityOptions options = ActivityOptions
.makeSceneTransitionAnimation(this, androidRobotView, "robot");
// start the new activity
startActivity(intent, options.toBundle());
}
});
코드 에서 View.setTransition Name()을 사용 하여 과도 애니메이션 을 설정 할 수 있 습 니 다.두 번 째 Activity 를 닫 으 려 면 과도 애니메이션 을 반전 시 키 려 면 Activity.finish AfterTransition()방법 을 사용 할 수 있 습 니 다.Activity.finish()가 아 닌 Activity.finish AfterTransition()방법 을 사용 할 수 있 습 니 다.
Start an activity with multiple shared elements 다 중 공유 요소 로 Activity 시작
만약 에 두 개의 Activity 가 하나의 공유 요 소 를 가지 고 있 지 않 으 면 그들 사이 에서 장면 transition 애니메이션 을 시작 하려 면 layot 에서 android:transition Name(또는 Activity 에서 코드 에서 View.setTransition Name()을 사용 하여 정의 하고 다음 과 같은 Activity Options 대상 을 만 듭 니 다.
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
Pair.create(view1, "agreedName1"),
Pair.create(view2, "agreedName2"));
곡선 운동 사용 하기Material 디자인 에서 애니메이션 은 곡선의 시간 삽입 값 과 공간 운동 모델 에 의존 합 니 다.안 드 로 이 드 5.0(api 21)이상 에서 애니메이션 시간 곡선 과 곡선 운동 모델 을 사용자 정의 할 수 있 습 니 다.
PathInterpolator 류 는 베 어 셀 곡선 이나 경로 대상 을 기반 으로 한 새로운 삽입 기 입 니 다.이 삽입 기 는 1 x1 정사각형 운동 곡선 을 지정 하 였 으 며,(0,0)을 닻 점 으로 하고,(1,1)을 제어점 으로 하여 구조 함수 의 매개 변수 로 한다.path interpolator 의 xml 자원 을 정의 할 수 있 습 니 다:
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1"/>
시스템 은 세 가지 기본 적 인 곡선,XML 자원 을 제공 합 니 다.Object Animator 류 는 새로운 구조 함수 가 있어 서 좌 표를 하나의 path 를 따라 두 가지 또는 두 가지 이상 의 속성 을 동시에 사용 할 수 있 습 니 다.예 를 들 어 다음 animator 는 path 대상 을 사용 하여 View 의 x 와 y 속성 을 동시에 조작 합 니 다.
ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();
Animate View State Changes 보기 상태 변경 애니메이션StateListAnimator 클래스 는 애니메이션 이 실 행 될 때 보기 의 상태 변 화 를 정의 할 수 있 습 니 다.다음 예 는 xml 에서 StateList Animator 를 정의 하 는 방법 을 보 여 줍 니 다.
<!-- animate the translationZ property of a view when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="2dp"
android:valueType="floatType"/>
<!-- you could have other objectAnimator elements
here for "x" and "y", or other properties -->
</set>
</item>
<item android:state_enabled="true"
android:state_pressed="false"
android:state_focused="true">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="100"
android:valueTo="0"
android:valueType="floatType"/>
</set>
</item>
</selector>
위의 예 에서 하나의 View 에 보기 상태 애니메이션 을 추가 하고 selector 요 소 를 사용 하 는 xml 자원 을 정의 하 며 view 에 부여 하 는 android:stateListAnimator 속성 을 정의 합 니 다.코드 에서 View 에 보기 상태 애니메이션 을 지정 하려 면 Animation Inflater.loadStateListAnimator()를 사용 하여 xml 자원 을 불 러 오고 View.setStateListAnimator()를 사용 하여 View 에 지정 할 수 있 습 니 다.테마 가 Material 테 마 를 계승 하면 단 추 는 기본적으로 z 애니메이션 을 가지 고 있 습 니 다.이러한 행동 이 단추 에 있 는 것 을 피하 기 위해 안 드 로 이 드:stateListAnimator 속성 값 을 null 로 설정 합 니 다.
Animated StateListDrawable 클래스 는 관련 View 의 상 태 를 보 여 주 며 애니메이션 을 변경 할 수 있 도록 그림 을 만 들 수 있 습 니 다.일부 시스템 의 Widget 은 5.0 에서 기본적으로 이 애니메이션 을 사용 합 니 다.다음 예 는 XML 자원 으로 Animated State List Drawable 을 정의 하 는 방법 을 보 여 줍 니 다.
<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- provide a different drawable for each state-->
<item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
android:state_pressed="true"/>
<item android:id="@+id/focused" android:drawable="@drawable/drawableF"
android:state_focused="true"/>
<item android:id="@id/default"
android:drawable="@drawable/drawableD"/>
<!-- specify a transition -->
<transition android:fromId="@+id/default" android:toId="@+id/pressed">
<animation-list>
<item android:duration="15" android:drawable="@drawable/dt1"/>
<item android:duration="15" android:drawable="@drawable/dt2"/>
...
</animation-list>
</transition>
...
</animated-selector>
Animate Vector Drawables 벡터 이미지 애니메이션벡터 그림 은 신축 이 가능 하지만 진실 을 잃 지 않 는 다.Animated Vector Drawable 류 는 벡터 그림 을 움 직 일 수 있 습 니 다.
보통 세 가지 xml 에서 동적 벡터 그림 을 정의 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.