呼吸灯效果动画

最近做项目,产品设计稿上说要做一个一闪一闪的效果,那简单啊,开个定时器显示不显示,一分钟搞定,但是到演示时,又说我要的不是这个效果(可能是我想的简单了)难道这不是一闪一闪么,亮瞎眼了,然后他就从ipad上找了个效果给我看,尼玛,这是一闪一闪么,这是呼吸灯效果。就上网搜了下,根据自己使用情况写了这个工具类。

主要使用了ObjectAnimator 动画类通过对默认view大小的改变实现呼吸灯效果,代码很简单,只要传入一个view就可以了。

public class AnimationUtils {
    private final int BREATH_INTERVAL_TIME = 2000; //设置呼吸灯时间间隔
    boolean isStopAnimation = false;
    ObjectAnimator anim1;
    ObjectAnimator anim2;
    ObjectAnimator anim3;
    ObjectAnimator anim4;
    AnimatorSet animSet;
    private boolean isUp = true;

    public AnimationUtils() {
        isStopAnimation = false;
    }

    /**
     * 停止动画
     */
    public void stopAnimation() {
        isStopAnimation = true;
        if (animSet != null) {
            animSet.cancel();
            animSet = null;
        }
    }

    /**
     * 开始动画
     *
     * @param view
     */
    public void startAnimation(final View view) {
        if (animSet == null) {
            isStopAnimation = false;
            startPlay(view, false);
        }

    }


    private void setAnimOut(final View view) {
        anim1 = ObjectAnimator.ofFloat(view, "scaleX",
                0.9f, 1.2f);
        anim2 = ObjectAnimator.ofFloat(view, "scaleY",
                0.9f, 1.2f);
    }

    private void setAnimIn(final View view) {
        anim3 = ObjectAnimator.ofFloat(view, "scaleX",
                1.2f, 0.9f);
        anim4 = ObjectAnimator.ofFloat(view, "scaleY",
                1.2f, 0.9f);
    }

    private void startPlay(final View view, boolean isPoll) {
        if (isStopAnimation) {
            return;
        }
        animSet = new AnimatorSet();
        setAnimOut(view);
        setAnimIn(view);
        animSet.setDuration(BREATH_INTERVAL_TIME);
        animSet.setInterpolator(new LinearInterpolator());


        if (isUp) {
            animSet.playTogether(anim1, anim2);
            isUp = false;
        } else {
            animSet.playTogether(anim3, anim4);
            isUp = true;
        }
        animSet.start();
        animSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                startAnimation(view, true);
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });

    }

    private void startAnimation(final View view, boolean isPoll) {
        startPlay(view, isPoll);
    }


}
Vue.js本身是一个前端框架,用于构建用户界面。要在Vue应用中实现背景图片的“呼吸灯效果,也就是动态地改变背景图片的透明度或大小,通常需要结合CSS动画和JavaScript来完成。下面是一种简单的实现方法: 1. 首先,在HTML中设置一个`<div>`作为背景容器,并给它绑定一个数据属性来控制动画状态,比如`breathLight`。 ```html <div class="bg-container" :style="{ backgroundImage: 'url(' + breathLight.src + ')', opacity: breathLight.opacity }"></div> ``` 2. 在CSS中定义一个关键帧动画,例如`breath`,让背景图片从完全透明变为不透明,然后回退到透明,可以反复循环。 ```css @keyframes breath { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } ``` 3. 在Vue组件内部,定义一个名为`breathLight`的对象,初始化为静态背景图片和0的透明度,然后在合适的钩子函数(如`mounted()`或自定义的`breathEffect()`)中更新这个对象的状态。 ```javascript export default { data() { return { breathLight: { src: 'your-background-image-url', opacity: 1, }, }; }, methods: { breathEffect() { this.breathLight.opacity = (Math.random() * 2) + 0.5; // 生成随机的透明度值 setTimeout(() => this.breatheEffect(), 1000); // 每秒切换一次动画 }, }, mounted() { this.breathEffect(); }, }; ``` 4. 这样每当组件挂载时,就会开始执行动画。你可以根据需要调整动画的频率、透明度范围等参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值