本文正在参加星光计划3.0–夏日挑战赛

前言

在项目开发中遇到给设备充电时，电池图标显示一个充电动画效果，下面基于 HarmonyOS 的JSAPI实现一个电池充电的动画效果。

效果展示

实现原理

电池充电的动画就是一个宽度从0%加载到100%的过程，所以在充电状态只需要动态改变显示的宽度就可以实现一个充电的效果，而电池的轮廓和充电状态采用加载本地图片的方式实现。

实现步骤

1. 实现电池图标

首先加载空电量的电池轮廓的图片，在电池轮廓的上面覆盖一个显示电池电量的进度条，在电池电量进度条的上面覆盖一个闪电图标，显示充电状态。

battery.hml：

<div class="container">
    <image show="true" src="{{ batteryIcon }}"></image>
    <div class="progress" style="width : {{ getBatteryNum() }} px;"></div>
    <image show="{{ chargeState }}" class="charging" src="/common/img/ic_charging.png"></image>
</div>

css样式：

.container {
    height: 48px;
    width: 48px;
    justify-content: center;
    align-items: center;
}

.progress {
    height: 16px;
    background-color: black;
    position: absolute;
    margin-left: 12%;
    top: 50%;
    transform: translate(0, -50%);
}

.charging {
    height: 48px;
    width: 48px;
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

2. 获取手机电池信息

通过系统接口提供的接口获取手机电池信息，导入batteryInfo模块，接口从API version 6开始支持。

import batteryInfo from '@ohos.batteryInfo';

batteryInfo详细属性：

index.js 中获取电池电量和充电状态

//获取设备电池电量百分比
this.batterySoc = batteryInfo.batterySOC
//设备电池是否在充电状态
this.chargingStatus = batteryInfo.chargingStatus == batteryInfo.BatteryChargeState.ENABLE

3. 实现动态改变进度条宽度

进度条必须显示在电池图标轮廓里，所以进度条的宽度不能超过电池图标，根据获取到的电量百分比，动态改变宽度但不能超过满电时的最大宽度，满电时的最大宽度可根据实现效果调整。

如下代码：

getBatteryNum() {
        let width = (this.percent / 100) * this.maxWidth
        if (this.percent >= 100) {
            return this.maxWidth
        }
        console.log(" getBatteryNum " + Math.round(width))
        return Math.round(width);
},

4. 实现充电动画效果

使用系统提供的动画接口，导入animator模块，接口从API version 6开始支持。

import animator from '@ohos.animator';

animator有以下方法：

AnimatorOptions属性：

在触发充电状态时，重复播放Animator动画，在onframe()回调中动态改变电池电量百分比，从而改变进度条宽度，详细代码如下：

battery.js 完整代码

import animator from '@ohos.animator';
import batteryInfo from '@ohos.batteryInfo';

export default {
    props: ['quantity', 'charge'],
    data() {
        return {
            percent: this.quantity,
            chargeState: this.charge,
            batteryIcon: "/common/img/ic_battery.png",
            animator: null,
            maxWidth: 30
        };
    },
    onInit() {
        console.log("battery onInit")
        this.setBatteryIcon()
        this.$watch('quantity', 'onQuantityChange')
        this.$watch('charge', 'onChargeChange')
        var options = {
            duration: 2000,
            easing: 'friction',
            fill: 'forwards',
            direction: 'reverse',
            iterations: -1,
            begin: 0,
            end: this.maxWidth
        };
        this.animator = animator.createAnimator(options);
        var _this = this;
        this.animator.onframe = function (value) {
            _this.percent = (parseInt(value) / _this.maxWidth) * 100
        };

    },
    onPageShow() {
        console.log("battery onPageShow percent = " + this.percent + " chargeState = " + this.chargeState)
    },
    // 监听是否变化电量
    onQuantityChange(newV, oldV) {
        console.log('======proQuantity============ newV=' + newV + " oldV = " + oldV)
        this.percent = newV
    },
    // 监听是否充电
    onChargeChange(newV, oldV) {
        console.log('======proIsCharge============newV =' + newV + " oldV = " + oldV)
        this.chargeState = newV
        if (this.chargeState) {
            this.animator.play();
        } else {
            this.percent = batteryInfo.batterySOC
            this.animator.cancel();
        }
    },
    getBatteryNum() {
        let width = (this.percent / 100) * this.maxWidth
        if (this.percent >= 100) {
            return this.maxWidth
        }
        console.log(" getBatteryNum " + Math.round(width))
        return Math.round(width);
    },
    onDestroy(){
        this.animator.cancel();
    }
}

总结

以上只是简单实现了一个平移动画的效果，结合系统的Animator可以实现各种各样炫酷的动画效果，可以提高应用的视觉和用户的体验，掌握HarmonyOS动画的使用，可以让我们更好的了解和参与HarmonyOS的开发。

更多原创内容请关注：中软国际 HarmonyOS 技术团队

入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com/#bkwz