Weex Android SDK源码分析之Module（animation）

Posted 2020-07-28 王永迪

前言

module 怎能少得了动画呢~

代码解读

weex code

API 接口

transition(node, options, callback)

Arguments 参数

node（Node）：将要动画的元素。

options（object）：操作选项

styles（object）：指定要应用的过渡效果的样式的名称和值。
color（string）：色彩的元素时，animaiton完成。
transform（object）：变换函数被应用到元素。支持下列值。
translate/ translatex / translatey（字符串）：translate的元素到新的位置。该值可以是像素或百分比
rotate（string）：单位为度。
scale（string）：放大或缩小元素。
duration（number）：指定一个过渡动画需要完成的毫秒数。默认情况下，该值是毫秒，这意味着没有动画会发生。
timingfuncion（string）：用来描述的方式被过渡效果影响的中间值的计算。默认值为 linear, 也可以是一个 ease-in, ease-out, ease-in-out, linear or cubic-bezier(x1, y1, x2, y2).
delay（number）：指定一个变化的要求，是转变和过渡效果的启动性能之间等待的毫秒数。默认情况下，该值为0毫秒。
transform-origin（string）：尺度和旋转的中心。该值可以是x、y的像素或关键字，如 left, right, bottom, top, center。

Callback 
过渡完成后调用的回调回调函数。

Example 实例

<template>
  <div class="ct">
    <div id="test"></div>
  </div>
</template>

<script>
  module.exports = {
    ready: function () {
      var animation = require(‘@weex-module/animation‘);
      var testEl = this.$el(‘test‘);
      animation.transition(testEl, {
        styles: {
          color: ‘#FF0000‘,
          transform: ‘translate(1, 1)‘
        },
        duration: 0, //ms
        timingFunction: ‘ease‘,
        transform-origin: ‘center center‘,
        delay: 0 //ms
      }, function () {
        nativeLog(‘animation finished.‘)
      })
    }
  }
</script>

android code

一、注册

WXModuleManager.registerModule("animation", WXAnimationModule.class, true);

二、动画WXAnimationBean类

看的出来与weex定义的options 一一对应

public class WXAnimationBean {

  public final static String LINEAR = "linear";
  public final static String EASE_IN_OUT = "ease-in-out";
  public final static String EASE_IN = "ease-in";
  public final static String EASE_OUT = "ease-out";
  public long delay;// 延迟时间
  public long duration; // 显示时间
  public String timingFunction; // 过渡效果
  public Style styles; //样式

  public static class Style {

    // 支持动画样式
    public final static String ANDROID_TRANSLATION_X = "translationX";
    public final static String ANDROID_TRANSLATION_Y = "translationY";
    public final static String ANDROID_ROTATION = "rotation";
    public final static String ANDROID_SCALE_X = "scaleX";
    public final static String ANDROID_SCALE_Y = "scaleY";
    public final static String WX_TRANSLATE = "translate";
    public final static String WX_TRANSLATE_X = "translateX";
    public final static String WX_TRANSLATE_Y = "translateY";
    public final static String WX_ROTATE = "rotate";
    public final static String WX_SCALE_X = "scaleX";
    public final static String WX_SCALE_Y = "scaleY";
    public final static String WX_SCALE = "scale";
    public final static String ALPHA = "alpha";
    public final static String BACKGROUND_COLOR = "backgroundColor";
    public final static String TOP = "top";
    public final static String BOTTOM = "bottom";
    public final static String RIGHT = "right";
    public final static String LEFT = "left";
    public final static String CENTER = "center";

    // 动画 key map
    public static Map<String, List<String>> wxToAndroidMap = new HashMap<>();

    static {
      wxToAndroidMap.put(WX_TRANSLATE, Arrays.asList
          (ANDROID_TRANSLATION_X, ANDROID_TRANSLATION_Y));
      wxToAndroidMap.put(WX_TRANSLATE_X, Collections.singletonList(ANDROID_TRANSLATION_X));
      wxToAndroidMap.put(WX_TRANSLATE_Y, Collections.singletonList(ANDROID_TRANSLATION_Y));
      wxToAndroidMap.put(WX_ROTATE, Collections.singletonList(ANDROID_ROTATION));
      wxToAndroidMap.put(WX_SCALE, Arrays.asList(ANDROID_SCALE_X, ANDROID_SCALE_Y));
      wxToAndroidMap.put(WX_SCALE_X, Collections.singletonList(ANDROID_SCALE_X));
      wxToAndroidMap.put(WX_SCALE_Y, Collections.singletonList(ANDROID_SCALE_Y));
      wxToAndroidMap = Collections.unmodifiableMap(wxToAndroidMap);
    }

    public String opacity; // 透明度
    public String backgroundColor; //背景
    public String transform;// 动画效果
    public String transformOrigin;//过渡效果
    private Map<String, Float> transformMap = new HashMap<>(); // 动画map
    private Pair<Float, Float> pivot; // 中心点坐标

    public Map<String, Float> getTransformMap() {
      return transformMap;
    }

    public void setTransformMap(Map<String, Float> transformMap) {
      this.transformMap = transformMap;
    }

    public Pair<Float, Float> getPivot() {
      return pivot;
    }

    public void setPivot(Pair<Float, Float> pivot) {
      this.pivot = pivot;
    }
  }
}

二、WXModuleManager 部分方法

public class WXAnimationModule extends WXModule {

    // 添加动画样式
    public static void applyTransformStyle(Map<String, Object> style, WXComponent component) {
        if (component != null) {
            View target = component.getRealView();
            if (style != null && target != null) {
                Object transform = style.get("transform");
                if (transform instanceof String &&
                     !TextUtils.isEmpty((String) transform) && target.getLayoutParams() != null) {
                    String transformOrigin;
                    try {
                        transformOrigin = (String) component.mDomObj.style.get("transformOrigin");
                    } catch (NullPointerException e) {
                        transformOrigin = null;
                    }
                    WXAnimationBean animationBean = new WXAnimationBean();
                    animationBean.styles = new WXAnimationBean.Style();
                    animationBean.styles.setPivot(
                            WXAnimationModule.parsePivot(transformOrigin, target.getLayoutParams()));
                    animationBean.styles.setTransformMap(
                    WXAnimationModule.parseTransForm((String) transform, target.getLayoutParams()));
                    Animator animator = WXAnimationModule.createAnimator(animationBean, target);
                    if (animator != null) {
                        animator.setDuration(0);
                        animator.start();
                    }
                }
            }
        }
    }

    // ** 解析动画bean
    public static
    WXAnimationBean parseAnimation(@Nullable String animation, ViewGroup.LayoutParams layoutParams) {
        try {
            WXAnimationBean animationBean = JSONObject.parseObject(animation, WXAnimationBean.class);
            if (animationBean != null && animationBean.styles != null) {
                WXAnimationBean.Style style = animationBean.styles;
                style.setTransformMap(parseTransForm(style.transform, layoutParams));
                style.setPivot(parsePivot(style.transformOrigin, layoutParams));
            }
            return animationBean;
        } catch (RuntimeException e) {
            WXLogUtils.e(WXLogUtils.getStackTrace(e));
            return null;
        }
    }

    // ** 创建动画
    public static
    ObjectAnimator createAnimator(@NonNull WXAnimationBean animation, @NonNull View target) {
        WXAnimationBean.Style style = animation.styles;
        if (style != null) {
            ObjectAnimator animator;
            List<PropertyValuesHolder> holders = new LinkedList<>();
            if (style.getTransformMap() != null) {
                if (style.getTransformMap().isEmpty()) {
                    holders.addAll(moveBackToOrigin());
                } else {
                    for (Map.Entry<String, Float> entry : style.getTransformMap().entrySet()) {
                        holders.add(PropertyValuesHolder.ofFloat(entry.getKey(), entry.getValue()));
                    }
                }
            }
            if (!TextUtils.isEmpty(style.opacity)) {
                holders.add(PropertyValuesHolder.ofFloat(WXAnimationBean.Style.ALPHA,
                                                         Float.valueOf(style.opacity)));
            }
            if (!TextUtils.isEmpty(style.backgroundColor)) {
                if (target.getBackground() instanceof WXBackgroundDrawable) {
                    holders.add(PropertyValuesHolder.ofObject(
                            WXAnimationBean.Style.BACKGROUND_COLOR, new ArgbEvaluator(),
                            ((WXBackgroundDrawable) target.getBackground()).getColor(),
                            WXResourceUtils.getColor(style.backgroundColor)));
                } else if (target.getBackground() instanceof ColorDrawable) {
                    holders.add(PropertyValuesHolder.ofObject(
                            WXAnimationBean.Style.BACKGROUND_COLOR, new ArgbEvaluator(),
                            ((ColorDrawable) target.getBackground()).getColor(),
                            WXResourceUtils.getColor(style.backgroundColor)));
                }
            }
            if (style.getPivot() != null) {
                Pair<Float, Float> pair = style.getPivot();
                target.setPivotX(pair.first);
                target.setPivotY(pair.second);
            }
            animator = ObjectAnimator.ofPropertyValuesHolder(
                    target, holders.toArray(new PropertyValuesHolder[holders.size()]));
            animator.setStartDelay(animation.delay);
            return animator;
        } else {
            return null;
        }
    }

    // ** 创建动画监听器
    public static Animator.AnimatorListener createAnimatorListener
            (final WXSDKInstance mWXSDKInstance, final String callBack) {
        if (!TextUtils.isEmpty(callBack)) {
            return new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    if (mWXSDKInstance == null) {
                        WXLogUtils.e("WXRenderStatement-onAnimationEnd mWXSDKInstance == null NPE");
                    } else {
                        // ** 动画结束后回调
                        WXSDKManager.getInstance().callback(mWXSDKInstance.getInstanceId(),
                                                            callBack,
                                                            new HashMap<String, Object>());
                    }
                }
            };
        } else {
            return null;
        }
    }

    // 创建动画过去效果
    public static
    Interpolator createTimeInterpolator(@NonNull WXAnimationBean animation) {
        String interpolator = animation.timingFunction;
        if (!TextUtils.isEmpty(interpolator)) {
            switch (interpolator) {
                case WXAnimationBean.EASE_IN:
                    return new AccelerateInterpolator();
                case WXAnimationBean.EASE_OUT:
                    return new DecelerateInterpolator();
                case WXAnimationBean.EASE_IN_OUT:
                    return new AccelerateDecelerateInterpolator();
                case WXAnimationBean.LINEAR:
                    return new LinearInterpolator();
            }
        }
        return null;
    }

    // 解析动画
    private static Map<String, Float> parseTransForm
        (String rawTransform, final ViewGroup.LayoutParams layoutParams) {
        if (!TextUtils.isEmpty(rawTransform)) {
            FunctionParser<Float> parser = new FunctionParser<>
                    (rawTransform, new FunctionParser.Mapper<Float>() {
                        @Override
                        public Map<String, Float> map(String functionName, List<String> raw) {
                            Map<String, Float> result = new HashMap<>();
                            if (raw != null && !raw.isEmpty()) {
                                // 判断是否有此类型动画
                                if (WXAnimationBean.Style.wxToAndroidMap.containsKey(functionName)) {
                                    // 根据参数转换动画
                                    result.putAll(convertParam(
                                            layoutParams, 
                                            WXAnimationBean.Style.wxToAndroidMap.get(functionName),
                                            raw));
                                }
                            }
                            return result;
                        }

                    });
            return parser.parse();
        }
        return new LinkedHashMap<>();
    }

    private static String parsePercentOrPx(String raw, int unit) {
        String lower = raw.toLowerCase();
        if (lower.endsWith("%")) {
            return parsePercent(raw, unit);
        } else if (lower.endsWith("px")) {
            return Float.toString(
                WXViewUtils.getRealPxByWidth(Float.parseFloat(raw.replace("px", ""))));
        }
        return Float.toString(WXViewUtils.getRealPxByWidth(Float.parseFloat(raw)));
    }

    // 按百分比进行转化
    private static String parsePercent(String percent, int unit) {
        return Float.toString(Float.parseFloat(percent.replace("%", "")) / 100 * unit);
    }

    // 解析坐标
    private static Pair<Float, Float> parsePivot(@Nullable String transformOrigin,
                                                 ViewGroup.LayoutParams layoutParams) {
        String[] split;
        List<String> list;
        if (!TextUtils.isEmpty(transformOrigin) &&
            ((split = transformOrigin.split("\\s+")).length >= 2)) {
            list = Arrays.asList(split).subList(0, 2);
            return parsePivot(list, layoutParams);
        } else {
            return parsePivot(
            Arrays.asList(WXAnimationBean.Style.CENTER, WXAnimationBean.Style.CENTER), layoutParams);
        }
    }

    private static Pair<Float, Float> parsePivot
        (@NonNull List<String> list, ViewGroup.LayoutParams layoutParams) {
        return new Pair<>(parsePivotX(list.get(0), layoutParams), 
                parsePivotY(list.get(1), layoutParams));
    }

    private static float parsePivotX(String x, ViewGroup.LayoutParams layoutParams) {
        String value = x;
        if (TextUtils.equals(x, WXAnimationBean.Style.LEFT)) {
            value = "0%";
        } else if (TextUtils.equals(x, WXAnimationBean.Style.RIGHT)) {
            value = "100%";
        } else if (TextUtils.equals(x, WXAnimationBean.Style.CENTER)) {
            value = "50%";
        }
        value = parsePercentOrPx(value, layoutParams.width);
        return Float.parseFloat(value);
    }

    private static float parsePivotY(String y, ViewGroup.LayoutParams layoutParams) {
        String value = y;
        if (TextUtils.equals(y, WXAnimationBean.Style.TOP)) {
            value = "0%";
        } else if (TextUtils.equals(y, WXAnimationBean.Style.BOTTOM)) {
            value = "100%";
        } else if (TextUtils.equals(y, WXAnimationBean.Style.CENTER)) {
            value = "50%";
        }
        value = parsePercentOrPx(value, layoutParams.height);
        return Float.parseFloat(value);
    }

    // 参数转化
    private static Map<String, Float> convertParam(ViewGroup.LayoutParams layoutParams,
                                                   @NonNull List<String> nameSet,
                                                   @NonNull List<String> rawValue) {
        Map<String, Float> result = new HashMap<>();
        List<String> convertedList = new ArrayList<>();
        if (nameSet.contains(WXAnimationBean.Style.ANDROID_ROTATION)) {
            convertedList.addAll(parseRotation(rawValue));
        } else if (nameSet.contains(WXAnimationBean.Style.ANDROID_TRANSLATION_X) ||
                   nameSet.contains(WXAnimationBean.Style.ANDROID_TRANSLATION_Y)) {
            convertedList.addAll(parseTranslation(nameSet, layoutParams, rawValue));
        } else if (nameSet.contains(WXAnimationBean.Style.ANDROID_SCALE_X) ||
                   nameSet.contains(WXAnimationBean.Style.ANDROID_SCALE_Y)) {
            convertedList.addAll(parseScale(nameSet.size(), rawValue));
        }
        if (nameSet.size() == convertedList.size()) {
            for (int i = 0; i < nameSet.size(); i++) {
                result.put(nameSet.get(i), Float.parseFloat(convertedList.get(i)));
            }
        }
        return result;
    }

    private static List<String> parseTranslation
        (List<String> nameSet, ViewGroup.LayoutParams layoutParams,@NonNull List<String> rawValue) {
        List<String> convertedList = new ArrayList<>();
        String first = rawValue.get(0);
        if (nameSet.size() == 1) {
            parseSingleTranslation(nameSet, layoutParams, convertedList, first);
        } else {
            parseDoubleTranslation(layoutParams, rawValue, convertedList, first);
        }
        return convertedList;
    }

    private static void parseSingleTranslation (List<String> nameSet, 
        ViewGroup.LayoutParams layoutParams, List<String> convertedList, String first) {
        if (nameSet.contains(WXAnimationBean.Style.ANDROID_TRANSLATION_X)) {
            convertedList.add(parsePercentOrPx(first, layoutParams.width));
        } else if (nameSet.contains(WXAnimationBean.Style.ANDROID_TRANSLATION_Y)) {
            convertedList.add(parsePercentOrPx(first, layoutParams.height));
        }
    }

    private static void parseDoubleTranslation(ViewGroup.LayoutParams layoutParams,
         @NonNull List<String> rawValue, List<String> convertedList, String first) {
        String second;
        if (rawValue.size() == 1) {
            second = first;
        } else {
            second = rawValue.get(1);
        }
        if (layoutParams != null) {
            convertedList.add(parsePercentOrPx(first, layoutParams.width));
            convertedList.add(parsePercentOrPx(second, layoutParams.height));
        }
    }

    // 解析缩放
    private static List<String> parseScale(int size, @NonNull List<String> rawValue) {
        List<String> convertedList = new ArrayList<>();
        convertedList.addAll(rawValue);
        if (size != 1 && rawValue.size() == 1) {
            convertedList.addAll(rawValue);
        }
        return convertedList;
    }

    // 解析旋转
    private static List<String> parseRotation(@NonNull List<String> rawValue) {
        List<String> convertedList = new ArrayList<>();
        String lower;
        for (String raw : rawValue) {
            lower = raw.toLowerCase();
            if (lower.endsWith("deg")) {
                convertedList.add(lower.replace("deg", ""));
            } else {
                convertedList.add(
                Double.valueOf(Math.toDegrees(Double.parseDouble(raw))).toString());
            }
        }
        return convertedList;
    }

    private static List<PropertyValuesHolder> moveBackToOrigin() {
        List<PropertyValuesHolder> holders = new LinkedList<>();
        holders.add(PropertyValuesHolder.ofFloat(WXAnimationBean.Style.ANDROID_TRANSLATION_X, 0));
        holders.add(PropertyValuesHolder.ofFloat(WXAnimationBean.Style.ANDROID_TRANSLATION_Y, 0));
        holders.add(PropertyValuesHolder.ofFloat(WXAnimationBean.Style.ANDROID_SCALE_X, 1));
        holders.add(PropertyValuesHolder.ofFloat(WXAnimationBean.Style.ANDROID_SCALE_Y, 1));
        holders.add(PropertyValuesHolder.ofFloat(WXAnimationBean.Style.ANDROID_ROTATION, 0));
        return holders;
    }

    // 接受weex桥接回调方法
    @WXModuleAnno
    public void transition(String ref, String animation, String callBack) {
        WXSDKManager.getInstance().getWXRenderManager().
        startAnimation(mWXSDKInstance.getInstanceId(), ref, animation, callBack);
    }
}

三、渲染管理器（WXRenderManager）

// 渲染声明队列
private ConcurrentHashMap<String, WXRenderStatement> mRegistries;

// 从登记的渲染声明中拿到当前的需要执行动画的animation控件，开启动画
public void startAnimation(String instanceId, String ref, String animation, String callBack) {
    WXRenderStatement statement = mRegistries.get(instanceId);
    if (statement == null) {
        return;
    }
    statement.startAnimation(ref, animation, callBack);
}

四、渲染声明（WXRenderStatement）

// 存储组件map
private Map<String, WXComponent> mRegistry;

// 从map中取到相应控件
void startAnimation(String ref, String animation, String callBack) {
        WXComponent component = mRegistry.get(ref);
        if (component == null || component.getRealView() == null) {
            return;
        }
        try {
            // 获取 animationBean
            WXAnimationBean animationBean = 
            WXAnimationModule.parseAnimation(animation, component.getRealView().getLayoutParams());
            if (animationBean != null) {
                // 创建 animator 对象
                Animator animator = 
                    WXAnimationModule.createAnimator(animationBean, component.getRealView());
                if (animator != null) {
                    // 创建监听
                    Animator.AnimatorListener animatorListener = 
                        WXAnimationModule.createAnimatorListener(mWXSDKInstance, callBack);
                    // 创建插补器 （过渡效果）
                    Interpolator interpolator = 
                        WXAnimationModule.createTimeInterpolator(animationBean);
                    if (animatorListener != null) {
                        animator.addListener(animatorListener);
                    }
                    if (interpolator != null) {
                        animator.setInterpolator(interpolator);
                    }
                    animator.setDuration(animationBean.duration);
                    animator.start();
                }
            }
        } catch (RuntimeException e) {
            WXLogUtils.e(WXLogUtils.getStackTrace(e));
        }
    }

流程 ：

    1、js 调用 本地module方法进行绘制；
    2、调用渲染声明生成动画bean；
    3、创建动画、设置监听、创建过渡效果；
    4、开启动画，结束回调callback；