안 드 로 이 드 는 동그라미 확산 물결 애니메이션 효과 두 가지 방법
사용자 정의 view 구현애니메이션 실현
사용자 정의 view 구현
사고 분석:canvas 를 통 해 원 을 그 리 며 원 의 반지름 과 투명 도 를 바 꿀 때마다 반지름 이 어느 정도 에 이 르 렀 을 때 다시 중심 에서 원 을 그 려 서로 다른 등급 의 효 과 를 얻 고 계속 그 려 서 view 확산 효 과 를 얻 을 수 있다.
private Paint centerPaint; // paint
private int radius = 100; //
private Paint spreadPaint; // paint
private float centerX;// x
private float centerY;// y
private int distance = 5; //
private int maxRadius = 80; //
private int delayMilliseconds = 33;// ,
private List<Integer> spreadRadius = new ArrayList<>();// ,
private List<Integer> alphas = new ArrayList<>();//
style 파일 에서 사용자 정의 속성
<declare-styleable name="SpreadView">
<!-- -->
<attr name="spread_center_color" format="color" />
<!-- -->
<attr name="spread_radius" format="integer" />
<!-- -->
<attr name="spread_spread_color" format="color" />
<!-- -->
<attr name="spread_distance" format="integer" />
<!-- -->
<attr name="spread_max_radius" format="integer" />
<!-- -->
<attr name="spread_delay_milliseconds" format="integer" />
</declare-styleable>
초기 화
public SpreadView(Context context) {
this(context, null, 0);
}
public SpreadView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public SpreadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SpreadView, defStyleAttr, 0);
radius = a.getInt(R.styleable.SpreadView_spread_radius, radius);
maxRadius = a.getInt(R.styleable.SpreadView_spread_max_radius, maxRadius);
int centerColor = a.getColor(R.styleable.SpreadView_spread_center_color, ContextCompat.getColor(context, R.color.colorAccent));
int spreadColor = a.getColor(R.styleable.SpreadView_spread_spread_color, ContextCompat.getColor(context, R.color.colorAccent));
distance = a.getInt(R.styleable.SpreadView_spread_distance, distance);
a.recycle();
centerPaint = new Paint();
centerPaint.setColor(centerColor);
centerPaint.setAntiAlias(true);
// 0
alphas.add(255);
spreadRadius.add(0);
spreadPaint = new Paint();
spreadPaint.setAntiAlias(true);
spreadPaint.setAlpha(255);
spreadPaint.setColor(spreadColor);
}
원심 위치 확인
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//
centerX = w / 2;
centerY = h / 2;
}
사용자 정의 view 그리 기
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < spreadRadius.size(); i++) {
int alpha = alphas.get(i);
spreadPaint.setAlpha(alpha);
int width = spreadRadius.get(i);
//
canvas.drawCircle(centerX, centerY, radius + width, spreadPaint);
// ,
if (alpha > 0 && width < 300) {
alpha = alpha - distance > 0 ? alpha - distance : 1;
alphas.set(i, alpha);
spreadRadius.set(i, width + distance);
}
}
//
if (spreadRadius.get(spreadRadius.size() - 1) > maxRadius) {
spreadRadius.add(0);
alphas.add(255);
}
// 8 , ,
if (spreadRadius.size() >= 8) {
alphas.remove(0);
spreadRadius.remove(0);
}
//
canvas.drawCircle(centerX, centerY, radius, centerPaint);
//TODO
// ,
postInvalidateDelayed(delayMilliseconds);
}
xml 스타일
<com.airsaid.diffuseview.widget.SpreadView
android:id="@+id/spreadView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:spread_center_color="@color/colorAccent"
app:spread_delay_milliseconds="35"
app:spread_distance="5"
app:spread_max_radius="90"
app:spread_radius="100"
app:spread_spread_color="@color/colorAccent" />
효과 도중심 원 에 글 쓰기,그림 그리 기 등 을 사용자 정의 할 수 있 습 니 다.
애니메이션 구현
사고 분석:애니메이션 을 통 해 이 루어 집 니 다.imageView 는 애니메이션 크기 조정+그 라 데 이 션 을 계속 합 니 다.
가장 중심 적 인 imageView 는 변 하지 않 습 니 다.
중간 층 의 imageView 는 원시 에서 1.4 배로 확대 되 는 동시에 투명 하지 않 고 반투명 으로 변 한다.
가장 바깥쪽 의 imageView 는 1.4 배 에서 1.8 배로 확대 되 는 동시에 반투명 에서 전 투명 으로 변 한다.
shape 를 이용 하여 원 을 그 려 애니메이션 기초 보기 로 합 니 다.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="65dp"/>
<solid android:color="@color/colorAccent"/>
</shape>
레이아웃 보기
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- imageView-->
<ImageView
android:id="@+id/iv_wave"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="center"
android:background="@drawable/shape_circle" />
<!-- imageView-->
<ImageView
android:id="@+id/iv_wave_1"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="center"
android:background="@drawable/shape_circle" />
<!-- imageView-->
<ImageView
android:id="@+id/iv_wave_2"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="center"
android:background="@drawable/shape_circle" />
</FrameLayout>
중간 이미지 View 애니메이션
private void setAnim1() {
AnimationSet as = new AnimationSet(true);
// , 1.4
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 1.4f, 1.0f, 1.4f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
//
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.5f);
scaleAnimation.setDuration(800);
scaleAnimation.setRepeatCount(Animation.INFINITE);
alphaAnimation.setRepeatCount(Animation.INFINITE);
as.setDuration(800);
as.addAnimation(scaleAnimation);
as.addAnimation(alphaAnimation);
iv1.startAnimation(as);
}
가장 바깥쪽 imageView 애니메이션
private void setAnim2() {
AnimationSet as = new AnimationSet(true);
// , 1.4 1.8
ScaleAnimation scaleAnimation = new ScaleAnimation(1.4f, 1.8f, 1.4f, 1.8f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
//
AlphaAnimation alphaAnimation = new AlphaAnimation(0.5f, 0.1f);
scaleAnimation.setDuration(800);
scaleAnimation.setRepeatCount(Animation.INFINITE);
alphaAnimation.setRepeatCount(Animation.INFINITE);
as.setDuration(800);
as.addAnimation(scaleAnimation);
as.addAnimation(alphaAnimation);
iv2.startAnimation(as);
}
효과 도비교 해 보면 사용자 정의 view 의 효과 가 더 좋 고 애니메이션 의 실현 이 더욱 편리 하 다.
두 가지 방식 으로 이 루어 진 확산 효과 에 대한 소개 가 끝나 면 구체 적 인 항목 에 서 는 수요 에 따라 변동 해 야 한다.
총결산
위 에서 말 한 것 은 안 드 로 이 드 가 동그라미 확산 물결 애니메이션 효 과 를 실현 하 는 두 가지 방법 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.