編輯:關於Android編程
支付寶上有一個咻一咻的功能,就是點擊圖片後四周有水波紋的這種效果,今天也寫一個類似的功能。
效果如下所示:
思路:
就是幾個圓的半徑不斷在變大,這個可以使用動畫縮放實現,還有透明動畫
還有就是這是好幾個圓,然後執行的動畫有個延遲效果,其實這些動畫是放在一起執行的,熟悉屬性動畫的知道已經給我們提供了同步執行動畫和順序執行動畫的實現api,也會會有人說這幾個view就是在onDraw()方法中畫幾個圓,可能會說我還要繼承容器view去onLayout()方法中這些子view添加在某個特定的區域,當然這也是可以的,其實簡單的就是以圖片為中心(圖片imageview在父view的中心),然後畫圓,指定每個字view的寬和高就行了,具體看代碼:
package com.zhifubaoxiuyixiu.view; import android.animation.Animator; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.content.Context; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.Gravity; import android.view.View; import android.view.animation.AccelerateDecelerateInterpolator; import android.widget.FrameLayout; import java.util.ArrayList; /** * Created by admin on 2016/12/29. */ public class ZhifubaoFrameLayout extends FrameLayout { private int rippleColor = Color.parseColor("#0099CC");//水波紋的顏色 private int radius = 0;//水波紋圓的半徑 private long anim_duration = 3000;//動畫執行的時間 private int water_ripple_count = 6; private int scale = 6;//動畫縮放比例 private long animDelay;//動畫延遲的時間 private Paint paint; private AnimatorSet animatorSet; private ArrayList<Animator> animatorList; private FrameLayout.LayoutParams rippleParams; private ArrayList<WateRipple> rippleViewList=new ArrayList<WateRipple>(); private boolean isAnimRunning = false; public ZhifubaoFrameLayout(Context context) { this(context,null); } public ZhifubaoFrameLayout(Context context, AttributeSet attrs) { this(context,attrs,0); } public ZhifubaoFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initPaint(); addChildView(); initAnim(); } /** * 初始化動畫 */ private void initAnim() { animatorSet = new AnimatorSet(); animatorSet.setInterpolator(new AccelerateDecelerateInterpolator()); animatorList=new ArrayList<Animator>(); for(int i=0;i<rippleViewList.size();i++){//幾個水波紋 final ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(rippleViewList.get(i), "ScaleX", 1.0f, scale); scaleXAnimator.setRepeatCount(ObjectAnimator.INFINITE); scaleXAnimator.setRepeatMode(ObjectAnimator.RESTART); scaleXAnimator.setStartDelay(i * animDelay); scaleXAnimator.setDuration(anim_duration); animatorList.add(scaleXAnimator); final ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(rippleViewList.get(i), "ScaleY", 1.0f, scale); scaleYAnimator.setRepeatCount(ObjectAnimator.INFINITE); scaleYAnimator.setRepeatMode(ObjectAnimator.RESTART); scaleYAnimator.setStartDelay(i * animDelay); scaleYAnimator.setDuration(anim_duration); animatorList.add(scaleYAnimator); final ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(rippleViewList.get(i), "Alpha", 1.0f, 0f); alphaAnimator.setRepeatCount(ObjectAnimator.INFINITE); alphaAnimator.setRepeatMode(ObjectAnimator.RESTART); alphaAnimator.setStartDelay(i * animDelay); alphaAnimator.setDuration(anim_duration); animatorList.add(alphaAnimator); } animatorSet.playTogether(animatorList); } /** * 添加水波紋子view */ private void addChildView() { radius = 32; animDelay=350; rippleParams=new FrameLayout.LayoutParams((int)(2*(radius)),(int)(2*(radius))); rippleParams.gravity = Gravity.CENTER; for(int i=0;i<water_ripple_count;i++){//幾個水波紋 WateRipple rippleView=new WateRipple(getContext(),paint); addView(rippleView,rippleParams); rippleViewList.add(rippleView); } } /** * 初始化畫筆 */ private void initPaint() { paint = new Paint(); paint.setAntiAlias(true); paint.setColor(rippleColor); paint.setStyle(Paint.Style.FILL); } /** * 開啟動畫 */ public void startRippleAnimation(){ if(!isRunning()){ for(WateRipple wateRipple:rippleViewList){ wateRipple.setVisibility(VISIBLE); } animatorSet.start(); isAnimRunning=true; } } /** * 動畫停止運行 */ public void stopAnimation(){ if(isRunning()){ animatorSet.cancel(); isAnimRunning=false; } } /** * 判斷是否動畫在運行 * @return */ public boolean isRunning(){ return isAnimRunning; } /** * ui不可見時關閉動畫 * @param visibility */ @Override protected void onWindowVisibilityChanged(int visibility) { super.onWindowVisibilityChanged(visibility); if(visibility==View.INVISIBLE||visibility ==View.GONE){ stopAnimation(); } } }
每個水波紋view
package com.zhifubaoxiuyixiu.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.view.View; /** * Created by admin on 2016/12/29. */ public class WateRipple extends View { private Paint mPaint; public WateRipple(Context context, Paint paint){ super(context); if(paint==null){ this.mPaint = new Paint(); }else{ this.mPaint = paint; } setVisibility(View.INVISIBLE);//剛開始設置不可見 } public WateRipple(Context context) { super(context); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int radius=(Math.min(getWidth(),getHeight()))/2; canvas.drawCircle(radius,radius,radius,mPaint); } }
圓形圖片:
package com.zhifubaoxiuyixiu.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Shader; import android.graphics.drawable.ShapeDrawable; import android.graphics.drawable.shapes.OvalShape; import android.util.AttributeSet; import android.view.View; import com.zhifubaoxiuyixiu.R; /** * Created by admin on 2016/12/29. */ public class CircleView extends View { private BitmapShader bitmapShaderp ; private ShapeDrawable shapeDrawable; public CircleView(Context context) { this(context,null); } public CircleView(Context context, AttributeSet attrs) { this(context, attrs,0); } public CircleView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initBitmap(); } private void initBitmap() { Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.grid); shapeDrawable = new ShapeDrawable(new OvalShape()); bitmapShaderp = new BitmapShader(bitmap, Shader.TileMode.CLAMP,Shader.TileMode.CLAMP); shapeDrawable.getPaint().setShader(bitmapShaderp); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); shapeDrawable.setBounds(0,0,getWidth(),getHeight()); shapeDrawable.draw(canvas); } }
布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <com.zhifubaoxiuyixiu.view.ZhifubaoFrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/root" > <com.zhifubaoxiuyixiu.view.CircleView android:layout_width="64dp" android:layout_height="64dp" android:layout_centerInParent="true" android:id="@+id/imageView" android:layout_gravity="center" android:src="@mipmap/grid"/> </com.zhifubaoxiuyixiu.view.ZhifubaoFrameLayout> </RelativeLayout>
使用:
package com.zhifubaoxiuyixiu; import android.app.Activity; import android.os.Bundle; import android.view.View; import com.zhifubaoxiuyixiu.view.CircleView; import com.zhifubaoxiuyixiu.view.ZhifubaoFrameLayout; public class MainActivity extends Activity { private CircleView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView = (CircleView) findViewById(R.id.imageView); final ZhifubaoFrameLayout root = (ZhifubaoFrameLayout) findViewById(R.id.root); imageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { root.startRippleAnimation(); } }); } }
以上所述是小編給大家介紹的Android 自定義view仿支付寶咻一咻功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對本站網站的支持!
好久沒更新過博客了。這段時間總算是忙完了,抽點時間出來更新下博客。這次跟大家帶來的是一個很簡單的短信驗證碼。相信這個驗證碼的功能基本上99的項目都需要用到,我這裡是用的雲
一丶PagerSlidingTabStrp運用扣丁音樂1.0前部分(gif圖大小限制)演示:視頻教程中是直接將PagerSlidingTabStrp例子的主頁面拿來做主頁
android系統中的每個ViewGroup的子類都具有下面三個和TouchEvent處理密切相關的方法: 1)public boolean dispatchTouc
現在公司做的是電商項目,在我的優惠券界面中有個未使用和已使用, 在列表中要求 點擊item 把下面的刪除按鈕顯示出來,點擊其他item的時候把 之前顯示的 隱藏把正被點擊