Skip to content

doutuifei/BlurImageAnimator

Repository files navigation

Android图片高斯模糊动画

version

前言

  • 这里只讲高斯模糊动画的处理,不讨论高斯模糊的处理方式。想看高斯模糊处理的可以参考这个Android 图片高斯模糊解决方案
  • 通过Bitmap多次处理高斯模糊做动画,容易卡顿或者OOM。
  • 优点:解耦,易扩展
  • 实际使用什么模糊方法随意,这只是一个例子

预览

image

使用

思路:底部放一张最大高斯模糊后的图片,使用FrameLayout在上面放一个没有模糊处理的图片。通过改变上层图片的setAlpha(float alpha)做到动画效果。 初始状态为显示高斯模糊图片。

依赖

  1. Gradle

    
    allprojects {
      repositories {
        maven { url 'https://jitpack.io' }
      }
    }
    
    
    dependencies {
      implementation 'com.github.mzyq:BlurImageAnimator:0.1.0'
    }
  2. Maven

    <repositories>
      <repository>
        <id>jitpack.io</id>
        <url>https://jitpack.io</url>
      </repository>
    </repositories>
    <dependency>
       <groupId>com.github.mzyq</groupId>
       <artifactId>BlurImageAnimator</artifactId>
       <version>0.1.0</version>
    </dependency>

代码

  1. 继承BlurView,并重写以下三个方法。

    protected abstract View getImageView(Context context);
    
    /**
     * 模糊图片加载
     *
     * @param blurView
     * @param imagePath
     * @param blueRadius
     */
    public abstract void blurImage(Context context, View blurView, Object imagePath, int blueRadius);
    
    /**
     * 正常图片加载
     *
     * @param blurView
     * @param imagePath
     */
    public abstract void normalImage(Context context, View blurView, Object imagePath);
  2. 设置需要加载的图片路径

    public void setImagePath(Object imagePath)
  3. 改变模糊程度/改变图片透明度

    public void setImageAlpha(float alpha)
  4. 动画:支持ValueAnimator和ObjectAnimator

  • ObjectAnimator动画

    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(blurCircleImageView, "ImageAlpha", 0, 1, 0);
    objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);
    objectAnimator.setDuration(2000);
    objectAnimator.start();
  • ValueAnimator动画

    ValueAnimator animator = ValueAnimator.ofFloat(0, 1, 0);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float alpha= (float) animation.getAnimatedValue();
            blurCircleImageView.setImageAlpha(alpha);
        }
    });
    animator.setRepeatCount(ValueAnimator.INFINITE);
    animator.setDuration(2000);
    animator.start();
  1. 其他方法