안 드 로 이 드 사용자 정의 뷰 그룹 현란 한 모조 알 리 페 이<unk><unk><unk><unk>레이더 펄스 효과 실현

작년 설 에 알 리 페 이 가 추진 한 집 복 바 행 사 는 더 이상 흥 행 할 수 없 었 습 니 다.더욱 힘 이 되 는 것 은 봄 밤 에 전 국민 이 참여 할 수 있 었 습 니 다.5 복 을 모 으 면 억 위안 의 보 너 스 를 똑 같이 나 눌 수 있 었 습 니 다.안 타 깝 게 도 경 업 복 이 없 었 습 니 다.그때 집에 서 할 일이 없 었 습 니 다.시간 이 되면 플러그 인 은 자동 으로을 눌 러보 너 스 를 받 을 수 있 습 니 다.그 때 는 단순히 이 기술 코드 만 연 습 했 을 뿐 공개 되 지 않 았 습 니 다.후속 계획 은 플러그 인 에 관 한 글 을 쓸 계획 입 니 다.멀 어 졌 습 니 다(*^ ^*)...우 리 는 알 리 페 이의페이지 에 레이더 가 확산 되 는 애니메이션 효과 가 있다 는 것 을 알 고 있 었 다.당시 에 애니메이션 효과 가 매우 좋다 고 느 꼈 기 때문에 개인 적 으로 비슷 한 효 과 를 실현 하려 고 시도 했다.나중에 github 에서 큰 신도 비슷 한 효과 가 있다 는 것 을 발견 했다.그래서 큰 신의 코드 를 읽 어 보 니 우리 의 핵심 사상 은 모두 같다.단지 디 테 일이 다 를 뿐 이 고 나 는 그 선 한 사람 을 선택 하여 따 랐 다.두 개의 코드 를 통합 시 켰 습 니 다.통합 후의 운행 효 과 는 다음 과 같 습 니 다.

설명 이 이 루어 지기 전에 우 리 는 먼저 알 리 페 이의효 과 를 분석 하고 알 리 페 이페이지 에 들 어간 후버튼 을 눌 렀 다.화면 에 원 하나 가 끊임없이 확대 작업 을 하고 있다.이 원 에서 확대 작업 을 하 는 동시에 투명도 도 큰 것 에서 작은 것 으로 변화 하고 있다.그 다음 에 이 원 이 사라 지기 전에 새로운 원 이 나타 나 똑 같은 애니메이션 작업 을 합 니 다.......................................................................마지막 으로 이 하위 View 에 확대 와 투명도 그 라 데 이 션 애니메이션 을 실행 시 키 면 이 효 과 를 실현 할 수 있다.이 대강 의 절 차 를 분명히 알 았 으 니 실현 하기 만 하면 처리 하기 쉽다.
먼저 우리 의 ViewGroup 을 정의 합 니 다.이 ViewGroup 은 고정된 수량의 하위 View 만 추가 한 다음 에 이 하위 View 에 일련의 애니메이션 을 실행 하 게 하기 때문에 FrameLayout 를 직접 계승 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다.

public class RadarLayout extends FrameLayout { 
public RadarLayout(Context context) { 
super(context); 
} 
public RadarLayout(Context context, AttributeSet attrs) { 
super(context, attrs); 
} 
public RadarLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
super(context, attrs, defStyleAttr); 
} 
}
우 리 는 자신의효과 컨트롤 러 를 RadarLayout,radar 를 레이더 라 는 뜻 으로 지 었 다.RadarLayout 는 끊임없이 스캐닝 을 하고 있다 는 뜻 이다.앞의 분석 을 통 해 RadarLayout 는 고정된 수량의 하위 View 로 구성 되 어 있 음 을 알 수 있 습 니 다.따라서 RadarLayout 는 하위 View 수량 을 나타 내 는 속성 이 있 고 이 속성 은 외부 에서 방문 하여 수정 할 수 있 습 니 다.하위 View 의 실행 애니메이션 은 축소 와 투명도 변화 가 동시에 진행 되 기 때문에 RadarLayout 는 애니메이션 집합 으로 각 애니메이션 을 조립 해 야 합 니 다.애니메이션 이 실 행 될 때 실행 시간 을 알 아야 하기 때문에 RadarLayout 는 실행 시간 을 표시 하 는 속성 이 있어 야 하고 이 속성 은 외부 에서 방문 하여 수정 할 수 있 습 니 다.RadarLayout 의 애니메이션 효 과 는 하위 View 로 실 행 됩 니 다.휴 일 휴 페이지 는 원 이기 때문에 하위 View 를 정의 하고 화면 에 그 려 야 합 니 다.화면 에 그 려 지 려 면 붓 이 있어 야 합 니 다.붓 은 색깔 이 있어 야 합 니 다.그리고 어디 에 그 려 야 하 는 지 알 아야 합 니 다.따라서 우리 의 RadarLayout 정 의 는 다음 과 같 습 니 다.

public class RadarLayout extends FrameLayout { 
public static final int INFINITE = 0; 
private static final int DEFAULT_COUNT = 4; 
private static final int DEFAULT_COLOR = Color.rgb(0, 116, 193); 
private static final int DEFAULT_DURATION = 7000; 
private static final int DEFAULT_REPEAT = INFINITE; 
private static final int DEFAULT_STROKE_WIDTH = 2; 
private int mCount; 
private int mDuration; 
private int mRepeat; 
private AnimatorSet mAnimatorSet; 
private Paint mPaint; 
private int mColor; 
private float mRadius; 
private float mCenterX; 
private float mCenterY; 
private int mStrokeWidth; 
private boolean mIsStarted; 
private boolean mUseRing; 
public RadarLayout(Context context) { 
super(context); 
initGlobalparams(); 
} 
public RadarLayout(Context context, AttributeSet attrs) { 
super(context, attrs); 
initGlobalparams(); 
} 
public RadarLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
super(context, attrs, defStyleAttr); 
initGlobalparams(); 
} 
private void initGlobalparams() { 
mColor = DEFAULT_COLOR; 
mCount = DEFAULT_COUNT; 
mDuration = DEFAULT_DURATION; 
mRepeat = DEFAULT_REPEAT; 
mUseRing = false; 
mStrokeWidth = dip2px(DEFAULT_STROKE_WIDTH); 
build(); 
} 
public synchronized void start() { 
if (mAnimatorSet == null || mIsStarted) { 
return; 
} 
mAnimatorSet.start(); 
} 
public synchronized void stop() { 
if (mAnimatorSet == null || !mIsStarted) { 
return; 
} 
mAnimatorSet.end(); 
} 
public synchronized boolean isStarted() { 
return (mAnimatorSet != null && mIsStarted); 
} 
public int getCount() { 
return mCount; 
} 
public int getDuration() { 
return mDuration; 
} 
public void setCount(int count) { 
if (count < 0) { 
throw new IllegalArgumentException("Count cannot be negative"); 
} 
if (count != mCount) { 
mCount = count; 
reset(); 
invalidate(); 
} 
} 
public void setDuration(int millis) { 
if (millis < 0) { 
throw new IllegalArgumentException("Duration cannot be negative"); 
} 
if (millis != mDuration) { 
mDuration = millis; 
reset(); 
invalidate(); 
} 
} 
public void setColor(int color) { 
if (mColor != color) { 
mColor = color; 
reset(); 
invalidate(); 
} 
} 
public void setUseRing(boolean useRing) { 
if (mUseRing != useRing) { 
mUseRing = useRing; 
reset(); 
invalidate(); 
} 
} 
@Override 
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
int width = getMeasuredWidth() - getPaddingLeft() - getPaddingRight(); 
int height = getMeasuredHeight() - getPaddingTop() - getPaddingBottom(); 
//             
mCenterX = width * 0.5f; 
mCenterY = height * 0.5f; 
mRadius = Math.min(width, height) * 0.5f; 
} 
private void clear() { 
stop(); 
removeAllViews(); 
} 
private void build() { 
LayoutParams params = new LayoutParams(MATCH_PARENT, MATCH_PARENT); 
int repeatCount = (mRepeat == INFINITE) ? ObjectAnimator.INFINITE : mRepeat; 
List<Animator> animators = new ArrayList<Animator>(); 
for (int index = 0; index < mCount; index++) { 
RadarView radarView = new RadarView(getContext()); 
radarView.setScaleX(0); 
radarView.setScaleY(0); 
radarView.setAlpha(1); 
addView(radarView, index, params); 
//        
long delay = index * mDuration / mCount; 
//      
animators.add(create(radarView, "scaleX", repeatCount, delay, 0, 1)); 
animators.add(create(radarView, "scaleY", repeatCount, delay, 0, 1)); 
animators.add(create(radarView, "alpha", repeatCount, delay, 1, 0)); 
} 
mAnimatorSet = new AnimatorSet(); 
mAnimatorSet.playTogether(animators); 
mAnimatorSet.setInterpolator(new LinearInterpolator()); 
mAnimatorSet.setDuration(mDuration); 
mAnimatorSet.addListener(mAnimatorListener); 
} 
private ObjectAnimator create(View target, String propertyName, int repeatCount, long delay, float from, float to) { 
ObjectAnimator animator = ObjectAnimator.ofFloat(target, propertyName, from, to); 
animator.setRepeatCount(repeatCount); 
animator.setRepeatMode(ObjectAnimator.RESTART); 
animator.setStartDelay(delay); 
return animator; 
} 
private void reset() { 
boolean isStarted = isStarted(); 
clear(); 
build(); 
if (isStarted) { 
start(); 
} 
} 
private class RadarView extends View { 
public RadarView(Context context) { 
super(context); 
} 
@Override 
protected void onDraw(Canvas canvas) { 
if (null == mPaint) { 
mPaint = new Paint(); 
mPaint.setColor(mColor); 
mPaint.setAntiAlias(true); 
//   Style   ,【STROKE:  】【FILL:  】 
mPaint.setStyle(mUseRing ? Style.STROKE : Style.FILL); 
mPaint.setStrokeWidth(mUseRing ? mStrokeWidth : 0); 
} 
//      
canvas.drawCircle(mCenterX, mCenterY, mUseRing ? mRadius - mStrokeWidth : mRadius, mPaint); 
} 
} 
private int dip2px(float dpValue) { 
final float scale = getResources().getDisplayMetrics().density; 
return (int) (dpValue * scale + 0.5f); 
} 
private final Animator.AnimatorListener mAnimatorListener = new Animator.AnimatorListener() { 
@Override 
public void onAnimationStart(Animator animator) { 
mIsStarted = true; 
} 
@Override 
public void onAnimationEnd(Animator animator) { 
mIsStarted = false; 
} 
@Override 
public void onAnimationCancel(Animator animator) { 
mIsStarted = false; 
} 
@Override 
public void onAnimationRepeat(Animator animator) { 
} 
}; 
}
우리 의 RadarLayout 는 이미 완성 되 었 습 니 다.코드 는 매우 간단 합 니 다.어린이 들 이 모두 알 고 있 을 것 이 라 고 믿 습 니 다.속성 mUserRing 의 의 미 를 주의해 야 합 니 다.mUserRing 이 true 일 때 링 레이더 펄스 를 사용 하고 그렇지 않 으 면 원형 레이더 펄스 를 사용 해 야 합 니 다.그 다음은 속성 애니메이션 의 사용 입 니 다.모 르 는 것 이 있 으 면 스스로 찾 아 보 세 요.여 기 는 더 이상 소개 하지 않 겠 습 니 다.다음은 우리 의 activitymain.xml 레이아웃 파일 은 다음 과 같 습 니 다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingBottom="@dimen/activity_vertical_margin" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
tools:context="com.llew.wb.MainActivity" > 
<View 
android:id="@+id/holder" 
android:layout_width="@dimen/activity_horizontal_margin" 
android:layout_height="10dp" 
android:layout_centerHorizontal="true" /> 
<com.llew.wb.RadarLayout 
android:id="@+id/radarlayout1" 
android:layout_width="match_parent" 
android:layout_height="150dp" 
android:layout_toLeftOf="@id/holder" 
android:background="#bbaacc" > 
</com.llew.wb.RadarLayout> 
<com.llew.wb.RadarLayout 
android:id="@+id/radarlayout2" 
android:layout_width="match_parent" 
android:layout_height="150dp" 
android:layout_toRightOf="@id/holder" 
android:background="#bbaacc" > 
</com.llew.wb.RadarLayout> 
<com.llew.wb.RadarLayout 
android:id="@+id/radarlayout3" 
android:layout_width="match_parent" 
android:layout_height="150dp" 
android:layout_below="@id/radarlayout1" 
android:layout_marginTop="@dimen/activity_horizontal_margin" 
android:layout_toLeftOf="@id/holder" 
android:background="#bbaacc" > 
</com.llew.wb.RadarLayout> 
<com.llew.wb.RadarLayout 
android:id="@+id/radarlayout4" 
android:layout_width="match_parent" 
android:layout_height="150dp" 
android:layout_below="@id/radarlayout1" 
android:layout_marginTop="@dimen/activity_horizontal_margin" 
android:layout_toRightOf="@id/holder" 
android:background="#bbaacc" > 
</com.llew.wb.RadarLayout> 
<Button 
android:layout_width="100dp" 
android:layout_height="wrap_content" 
android:layout_alignParentBottom="true" 
android:layout_centerHorizontal="true" 
android:layout_marginBottom="20dp" 
android:onClick="start" 
android:text="  " /> 
</RelativeLayout>
activitymain.xml 레이아웃 에 RadarLayout 4 개 를 추 가 했 습 니 다.그 목적 은 그들의 차 이 를 비교 하 는 것 입 니 다.이어서 MainActivity 를 작성 하 는 것 입 니 다.코드 는 다음 과 같 습 니 다.

public class MainActivity extends Activity { 
private RadarLayout layout1; 
private RadarLayout layout2; 
private RadarLayout layout3; 
private RadarLayout layout4; 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_main); 
layout1 = (RadarLayout) findViewById(R.id.radarlayout1); 
layout2 = (RadarLayout) findViewById(R.id.radarlayout2); 
layout2.setUseRing(true); 
layout2.setCount(2); 
layout3 = (RadarLayout) findViewById(R.id.radarlayout3); 
layout3.setUseRing(false); 
layout3.setColor(Color.RED); 
layout4 = (RadarLayout) findViewById(R.id.radarlayout4); 
layout4.setCount(7); 
layout4.setColor(Color.BLUE); 
layout4.setUseRing(true); 
} 
public void start(View view) { 
layout1.start(); 
layout2.start(); 
layout3.start(); 
layout4.start(); 
} 
}
MainActivity 에서 layot 1 을 기본 값 효과 로 설 정 했 습 니 다.layot 2 는 링 효 과 를 사용 하고 수량 을 2 개 로 설 정 했 습 니 다.layot 3 는 원형 을 사용 하고 원형의 색 을 빨간색 으로 설정 합 니 다.layot 3 는 링 을 사용 하고 링 의 수량 을 7 개 로 설정 하 며 파란색 에 색 을 설정 합 니 다.시작 단 추 를 누 르 면 모든 RadarLayout 애니메이션 을 엽 니 다.실행 효 과 는 다음 과 같 습 니 다.

운행 효과 가 괜찮아 보이 는데 기본적으로 모조 지불 의레이더 펄스 효 과 를 실현 했다.주요 원 리 는 속성 애니메이션 을 이용 하여 이 속성 애니메이션 을 한데 모 아 재생 하면 된다 는 것 이다.주의해 야 할 것 은 저 버 전에 서 속성 애니메이션 을 호 환 하려 면 Jake Wharton 대신 오픈 소스 의 유명한 애니메이션 호 환 라 이브 러 리 Nine Old Androids 를 사용 할 수 있 습 니 다.마지막 으로 시청 해 주 셔 서 감사합니다.(*^ ^*)...
위 에서 말 한 것 은 소 편 이 소개 한 안 드 로 이 드 사용자 정의 뷰 그룹 이 화려 한 가짜 알 리 페 이 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차 차여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기