Android 사용자 정의 view 모 의 틱 톡 좋아요 효과 구현
사용자 정의 view 를 배우 고 놀 고 싶 은 것 이 있 습 니 다.마침 틱 톡 의 좋아요 효과 가 좋 은 것 을 보 았 습 니 다.시도 해 보 세 요.
틱 톡 효과:
말 이 많 지 않 으 니 먼저 코드 를 달 아 라.
public class Love extends RelativeLayout {
private Context mContext;
float[] num = {-30, -20, 0, 20, 30};//
public Love(Context context) {
super(context);
initView(context);
}
public Love(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initView(context);
}
public Love(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
private void initView(Context context) {
mContext = context;
}
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
ImageView imageView = new ImageView(mContext);
LayoutParams params = new LayoutParams(100, 100);
params.leftMargin = getWidth() - 200;
params.topMargin = getHeight() / 2 - 300;
imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));
imageView.setLayoutParams(params);
addView(imageView);
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext, " , ", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public boolean onTouchEvent(MotionEvent event) {
final ImageView imageView = new ImageView(mContext);
LayoutParams params = new LayoutParams(300, 300);
params.leftMargin = (int) event.getX() - 150;
params.topMargin = (int) event.getY() - 300;
imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));
imageView.setLayoutParams(params);
addView(imageView);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))
.with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))
.with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))
.with(alpha(imageView, 0, 1, 100, 0))
.with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))
.with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))
.with(translationY(imageView, 0, -600, 800, 400))
.with(alpha(imageView, 1, 0, 300, 400))
.with(scale(imageView, "scaleX", 1, 3f, 700, 400))
.with(scale(imageView, "scaleY", 1, 3f, 700, 400));
animatorSet.start();
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
removeViewInLayout(imageView);
}
});
return super.onTouchEvent(event);
}
public static ObjectAnimator scale(View view, String propertyName, float from, float to, long time, long delayTime) {
ObjectAnimator translation = ObjectAnimator.ofFloat(view
, propertyName
, from, to);
translation.setInterpolator(new LinearInterpolator());
translation.setStartDelay(delayTime);
translation.setDuration(time);
return translation;
}
public static ObjectAnimator translationX(View view, float from, float to, long time, long delayTime) {
ObjectAnimator translation = ObjectAnimator.ofFloat(view
, "translationX"
, from, to);
translation.setInterpolator(new LinearInterpolator());
translation.setStartDelay(delayTime);
translation.setDuration(time);
return translation;
}
public static ObjectAnimator translationY(View view, float from, float to, long time, long delayTime) {
ObjectAnimator translation = ObjectAnimator.ofFloat(view
, "translationY"
, from, to);
translation.setInterpolator(new LinearInterpolator());
translation.setStartDelay(delayTime);
translation.setDuration(time);
return translation;
}
public static ObjectAnimator alpha(View view, float from, float to, long time, long delayTime) {
ObjectAnimator translation = ObjectAnimator.ofFloat(view
, "alpha"
, from, to);
translation.setInterpolator(new LinearInterpolator());
translation.setStartDelay(delayTime);
translation.setDuration(time);
return translation;
}
public static ObjectAnimator rotation(View view, long time, long delayTime, float... values) {
ObjectAnimator rotation = ObjectAnimator.ofFloat(view, "rotation", values);
rotation.setDuration(time);
rotation.setStartDelay(delayTime);
rotation.setInterpolator(new TimeInterpolator() {
@Override
public float getInterpolation(float input) {
return input;
}
});
return rotation;
}
}
사고의 방향 을 실현 하 다.클릭 할 때 하트 모양 의 그림 을 전체 view 에 추가 한 다음 애니메이션 을 실행 합 니 다.주요 처리 논 리 는 모두 onTouchEvent()사건 에 있 습 니 다.다음은 사고 와 코드 를 상세 하 게 설명 하 겠 습 니 다.
@Override
public boolean onTouchEvent(MotionEvent event) {
final ImageView imageView = new ImageView(mContext);
LayoutParams params = new LayoutParams(300, 300);
params.leftMargin = (int) event.getX() - 150;
params.topMargin = (int) event.getY() - 300;
imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));
imageView.setLayoutParams(params);
addView(imageView);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))
.with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))
.with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))
.with(alpha(imageView, 0, 1, 100, 0))
.with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))
.with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))
.with(translationY(imageView, 0, -600, 800, 400))
.with(alpha(imageView, 1, 0, 300, 400))
.with(scale(imageView, "scaleX", 1, 3f, 700, 400))
.with(scale(imageView, "scaleY", 1, 3f, 700, 400));
animatorSet.start();
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
removeViewInLayout(imageView);
}
});
return super.onTouchEvent(event);
}
•우선 터치 이벤트 에서 감청 을 해 야 합 니 다.터치 가 있 을 때 하트 그림 을 보 여 주 는 ImageView 를 만들어 야 합 니 다.
final ImageView imageView = new ImageView(mContext);
imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));//
•그림 이 보 여 주 는 위 치 를 설정 합 니 다.손가락 이 만 져 야 하 는 위치 위,즉 터치 점 은 하트 모양 의 아래쪽 에 있 는 위치 입 니 다.그래서 우 리 는 ImageView 를 손가락 위치 에 설정 해 야 한다.
LayoutParams params = new LayoutParams(300, 300);
params.leftMargin = (int) event.getX() - 150;
params.topMargin = (int) event.getY() - 300;
imageView.setLayoutParams(params);
•imageView 에 부모 view 에 추가 합 니 다.
addView(imageView);
•imageView 애니메이션 설정
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))// ,X 2 0.9
.with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))// ,Y 2 0.9
.with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))// , num={-30.-20,0,20,30}
.with(alpha(imageView, 0, 1, 100, 0))// , 0-1.
.with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))// ,X 0.9 1
.with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))// ,Y 0.9 1
.with(translationY(imageView, 0, -600, 800, 400))// ,Y 0 600
.with(alpha(imageView, 1, 0, 300, 400))// , 1-0
.with(scale(imageView, "scaleX", 1, 3f, 700, 400))// ,X 1 3
.with(scale(imageView, "scaleY", 1, 3f, 700, 400));// ,Y 1 3
animatorSet.start();
•물론 view 를 무제 한 추가 할 수 는 없습니다.view 가 사라 진 후에 ImageView 를 수 동 으로 제거 해 야 합 니 다.
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
removeViewInLayout(imageView);
}
});
효 과 는 다음 과 같 습 니 다:총결산
위 에서 말 한 것 은 편집장 이 소개 한 안 드 로 이 드 사용자 정의 뷰 로 틱 톡 좋아요 효 과 를 실현 하 는 것 입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주세요.편집장 님 이 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.