GifImage

立即使用

概述

本模块可在指定位置显示一张 Gif 图,原生实现,节省内存,提高性能。可自定义大小、位置等。支持同一页面打开多个模块,并以 ID 区分。可通过模块 ID 移动、显示、隐藏、关闭已经打开的模块。

关于AVM方式

本模块支持 AVM 方式打开。通过 AVM 标签方式打开的模块,在 js 代码中需要通过 document.getElementById 的形式获取该模块实例对象然后进行其它逻辑的操作(setGif、hide、show)。否则会产生莫名其妙的问题。

示例:

<mo-gifimage id="engine3GifImage"></mo-gifimage>

该模块同时也支持 api.require 方式调用,通过 open 接口相当于 AVM 的标签打开了一个GIF图片显示区域的 frame(view)模块。

模块接口

setGif

设置通过 AVM 方式打开的模块的 GIF 图片

setGif({params},callback(ret))

params

path:

  • 类型:字符串
  • 描述:本地图片路径,支持fs://、widget://

示例代码

var GifImage = document.getElementById('engine3GifImage');
GifImage.setGif({
  path:'widget://res/gif.gif'
})

可用性

iOS 系统,Android 系统暂不支持AVM方式打开

可提供的 1.0.0 及更高版本

open

在指定页面显示一张 GIF 图片

open({params},callback(ret))

params

path:

  • 类型:字符串
  • 描述:本地图片路径,支持fs://、widget://

rect:

  • 类型:JSON 类型
  • 描述:(可选项)GIF 图片显示区域的位置及大小
  • 内部字段:
{
    x: 0,        //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
    y: 0,        //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
    w:300,       //(可选项)数字类型;模块宽度(相对于所属的 Window 或 Frame;默认:100%
    h:600        //(可选项)数字类型;模块高度(相对于所属的 Window 或 Frame;默认:100%
}

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:预览窗口依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)预览窗口是否随所属 window 或 frame 滚动
  • 默认值:true(不随之滚动)

callback(ret)

  • 类型:JSON对象
  • 描述:回调模块ID
  • 内部字段:
{
     status:true, //布尔类型,是否成功打开
     ID:'',        //字符串类型;打开的 Gif 图片的 ID
     message:'' //status为false时返回错误信息
}

示例代码

var GifImage = api.require('GifImage');
GifImage.open({
  rect:{
    x:,
    y:,
    w:,
    h:
  },
  fixedOn:'',
  fixed:false
},function(ret){
   api.alert({msg:JSON.stringify(ret)});
})

可用性

iOS 系统,Android 系统

可提供的 1.0.0 及更高版本

close

关闭打开的 Gif 图片

close({params})

params

ID:

  • 类型:字符串
  • 描述:Gif 图片的 ID

示例代码

var GifImage = api.require('GifImage');
GifImage.close({
  ID:
})

可用性

iOS 系统,Android 系统

可提供的 1.0.0 及更高版本

show

显示打开的 Gif 图片

show({params})

params

ID:

  • 类型:字符串
  • 描述:Gif 图片的 ID

示例代码

var GifImage = api.require('GifImage');
GifImage.show({
  ID:
})
//显示avm方式打开的模块
var e3GifImage = document.getElementById('engine3GifImage');
e3GifImage.show();

可用性

iOS 系统,Android 系统

可提供的 1.0.0 及更高版本

hide

隐藏打开的 Gif 图片

hide({params})

params

ID:

  • 类型:字符串
  • 描述:Gif 图片的 ID

示例代码

var GifImage = api.require('GifImage');
GifImage.hide{
  ID:
})

//隐藏avm方式打开的模块
var e3GifImage = document.getElementById('engine3GifImage');
e3GifImage.hide();

可用性

iOS 系统,Android 系统

可提供的 1.0.0 及更高版本

reset

重设指定 GIF 图片的位置和大小

reset({params})

params

ID:

  • 类型:字符串
  • 描述:重设的 Gif 图片的 ID

rect:

  • 类型:JSON 类型
  • 描述:(可选项)GIF 图片显示区域的位置及大小
  • 内部字段:
{
    x: 0,        //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
    y: 0,        //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
    w:300,       //(可选项)数字类型;模块宽度(相对于所属的 Window 或 Frame;默认:100%
    h:600        //(可选项)数字类型;模块高度(相对于所属的 Window 或 Frame;默认:100%
}

示例代码

var GifImage = api.require('GifImage');
GifImage.reset({
  rect:{
    x:,
    y:,
    w:,
    h:
  }
})

可用性

iOS 系统,Android 系统

可提供的 1.0.0 及更高版本