终端开发

使用Android Studio开发可独立运行(runnable)混淆过的Jar程序 Android安装包精简系列之资源精简 Android安装包精简系列之图片优化 Android安装包精简系列之为什么要优化精简安装包 Android安装包精简系列(总纲) Android安装包精简系列之图标转字体 gradle相关资料汇总 Android编译常见错误解决 Android编译编译速度提升 终端基于gradle的开源项目运行环境配置指引 制作终端产品演示的gif 一个关于APK Signature Scheme v2签名的神奇bug定位经历 如何随apk一起打包并使用SQLite SDK热更之gradle插件(如何在SDK代码中自动插桩及如何生成补丁包) 关于Android的APK Signature Scheme v2签名相关的资料汇总 封装HttpURLConnection实现的简单的网络请求库 一款基于Java环境的读取应用包名、签名、是否V2签名等基本信息的工具 Android的APK Signature Scheme v2签名及一款基于Java环境的校验工具介绍 如何使用Eclipse开发可执行Jar程序,并生成混淆过的jar程序 Android 相关的学习资料整理(持续更新) macOS(Sierra 10.12)上Android源码(AOSP)的下载、编译与导入到Android Studio Google也看不下去被玩坏的悬浮窗了么? Android开发常用工具资源 SDK热更系列之概述(持续整理编辑中~) SDK热更系列之SDKHotfix待优化点 Android 终端开发相关的一些神图(持续更新) SDK热更系列之Demo项目介绍概述 SDK热更系列之Demo体验方法 SDK热更系列之如何获取应用在当前设备上的so对应的指令集 Gradle Android插件使用的中那些特别注意的点 Experimental Plugin User Guide(From Android Tools Project Site) 基于Android Studio使用gradle构建包含jni以及so的构建实例 基于Instrumentation框架的自动化测试 - Android自动化测试系列(四) Instrumentation框架介绍-Android自动化测试系列(三) 关于终端设备的设备唯一性的那些事之MAC地址 关于终端设备的设备唯一性的那些事之IMEI Android 检查应用是否有root权限 ant常见错误解决方案 Gradle介绍 iMac上Android Studio 相关设置及常见问题 再说adb 再看Android官方文档之分享 再看Android官方文档之Fragment&数据保存 再看Android官方文档之Activity&Intent 再看Android官方文档之ActionBar和兼容性 adb shell input(Android模拟输入)简单总结 再看Android官方文档之建立第一个APP Android开发调试常用工具 ANR(网络资料整理) Java参数引用传递引发的惨案(又一次Java的String的“非对象”特性的踩坑经历) android.view.WindowManager$BadTokenException,Unable to add window Android签名校验机制(数字证书) Robotium二三事-Android自动化测试系列(二) Robotium介绍-Android自动化测试系列(一) Android开发中遇到的那些坑 Eclipse使用中部分经验总结 Android中关于Nativa编译(NDK、JNI)的一些问题 Android简单实现的多线程下载模块 Android内存耗用之VSS/RSS/PSS/USS adb Advanced Command URL编码中的空格(编码以后变为+) Android MD5后 bye数组转化为Hex字符串的坑(记一次为女神排忧解难的经历) Android学习之路 adb Base Command Android Log的那些坑…………

标签

android 46

Android编译常见错误解决 一个关于APK Signature Scheme v2签名的神奇bug定位经历 关于Android的APK Signature Scheme v2签名相关的资料汇总 封装HttpURLConnection实现的简单的网络请求库 一款基于Java环境的读取应用包名、签名、是否V2签名等基本信息的工具 Android的APK Signature Scheme v2签名及一款基于Java环境的校验工具介绍 如何使用Eclipse开发可执行Jar程序,并生成混淆过的jar程序 Android 相关的学习资料整理(持续更新) macOS(Sierra 10.12)上Android源码(AOSP)的下载、编译与导入到Android Studio Android开发常用命令备忘 Google也看不下去被玩坏的悬浮窗了么? Android开发常用工具资源 Android 终端开发相关的一些神图(持续更新) Gradle Android插件使用的中那些特别注意的点 Experimental Plugin User Guide(From Android Tools Project Site) iMac(OS X)搭建私有maven仓库,提供Nexus Responsitory镜像 基于Android Studio使用gradle构建包含jni以及so的构建实例 基于Instrumentation框架的自动化测试 - Android自动化测试系列(四) Instrumentation框架介绍-Android自动化测试系列(三) 关于终端设备的设备唯一性的那些事之MAC地址 关于终端设备的设备唯一性的那些事之IMEI Android 检查应用是否有root权限 iMac(OS X)El Capitan 更新遇到的那些坑 ant常见错误解决方案 Gradle介绍 iMac上Android Studio 相关设置及常见问题 再说adb 再看Android官方文档之分享 再看Android官方文档之Fragment&数据保存 再看Android官方文档之Activity&Intent 再看Android官方文档之ActionBar和兼容性 adb shell input(Android模拟输入)简单总结 再看Android官方文档之建立第一个APP Android开发调试常用工具 ANR(网络资料整理) Java参数引用传递引发的惨案(又一次Java的String的“非对象”特性的踩坑经历) android.view.WindowManager$BadTokenException,Unable to add window Android签名校验机制(数字证书) Eclipse使用中部分经验总结 Android内存耗用之VSS/RSS/PSS/USS adb Advanced Command URL编码中的空格(编码以后变为+) Android MD5后 bye数组转化为Hex字符串的坑(记一次为女神排忧解难的经历) Android学习之路 adb Base Command Android Log的那些坑…………

制作终端产品演示的gif

2017年03月06日

概述

作为终端开发,经常需要展示项目进度或者UI的效果,此时最好的方法自然是提供安装包来亲自体验,然而有些时候有些场合做一些产品展示时这种形式并不适用,提供一个简单的视频或者动图是一种更好的演示方法。最近正好想做一些演示的gif,在网上查阅了很多录屏的方法,但都不是很好用,因此专门整理了一下制作终端产品演示的gif的工具和方法。

windows

在windows下有一款非常好用的工具,ScreenToGif,下载安装后即可使用,由于个人没有windows设备,因此不详细说明。

macOS

搜索看了下,目前mac上暂时没有类似windows上ScreenToGif这种成熟的应用,看来只能是曲线救国了,最终用了下面的方案来实现:

  1. 录屏,首先操作手机录制操作过程的视频
  2. 视频转gif,采用工具将录制的视频转为gif

接下来会逐个列出关于两个步骤的几种方案,实操过程中尝试过很多工具就不一一列出,仅提供个人试用后选择的方案。

录屏

录屏又有几种方式,具体如下

androidtool-mac

androidtool-mac是一款使用Swift语言编写的工具,可在mac上对Android手机和智能手表进行一键截屏、录制视频和安装APK等操作。他其实也可以生成gif图片,只是生成效果不太好(相同的内容,gif的大小可能是视频的两倍),因此一般建议只用来获取视频文件,或者对他获取的gif做二次压缩处理。

Android Studio

其实,Android Studio 已经提供了屏幕截图和录制的方式,在Android Studio开发界面视图的Android Monitor界面中就有截图和屏幕录制的按钮,他可以提供最长三分钟的屏幕录制。

command line

自然还是使用强大的adb命令。

  • 录制命令

    视频格式为mp4,存放到手机sd卡里,默认录制时间为180s,可用ctrl + c结束录制。

      adb shell screenrecord /sdcard/screenre.mp4
    
  • 指定录制时间:–time-limit,例如指定录制10S:

      adb shell screenrecord  --time-limit 10 /sdcard/screenre.mp4
    
  • 指定分辨率:–size [宽*高],例如指定录制分辨率为720*1280:

      adb shell screenrecord --size 720*1280 /sdcard/screenre.mp4
    

gif转换

gif图片转换主要是两部分,一部分是将前一步的录制的视频转换为gif,另一步是将生成的gif进行进一步的压缩。

视频转gif

  • PicGif Lite

    PicGif的功能非常强大,它允许用户在极短的时间内将照片和视频转换成栩栩如生的动态GIF图片. 用户可自定义GIF的大小, 播放顺序, 速度等。而且可以删除图片内容

  • GIF Brewery 3

    GIF Brewery 是一款mac上的免费的视频转gif工具,它支持修改时长,剪切,在gif中插入文字图片等功能。

  • ezgif

    ezgif 是一款在线的视频转gif工具。官网地址为:https://ezgif.com/video-to-gif

gif 压缩

一般通过以上的方法生成的gif图片都比较大,如果用编辑软件来处理都太耗时,因此最好是可以通过一些压缩工具进一步压缩,下面就介绍一些gif压缩的工具,重点介绍命令行工具gifsicle。

  • 命令行工具

    gifsicle是一款很强大的gif编辑工具,对应的github开源地址为:https://github.com/zixieTools/gifsicle。这里对于gifsicle不详细展开介绍太多内容,仅介绍怎么下载安装和使用。

    开发者可以直接通过在github上clone源码以后按照指引来编译安装(对于mac上,更推荐使用homebrew来安装。如果不了解homebrew,请参考文档OS X 不可或缺的套件管理器 —— Homebrew)。在命令行下输入下面的命令安装gifsicle:

      ➜	brew install gifsicle
    

    当gifsicle安装好以后,就可以使用下面的命令进行压缩:

      ➜ gifsicle -O3 --colors=64 --resize-fit-height=600 ./NEED_OPTIMIZE.gif > ./AFTER_OPTIMIZE.gif
    

    参数含义如下:

      - -O 优化效果
    	
              -O1 只保存每张图像上变化的部分。这是缺省模式。
              -O2 进一步用透明度压缩图片。
              -O3 尝试各种优化方法(通常速度会慢一些,有时会产生更好的效果)。
    	
      - --colors
    
          修改gif的调色盘,基本上使用64就可以了,至于调色盘是什么,自行google
    		
      - --resize-fit-height
    
          调整图像的分辨率,通过调整到适当的大小也可以大大减少图片尺寸。
    

    上面的几个参数是自己通过不断测试验证以后确定的参数,当然也可以根据自己的需要优化调整,接下来以实际图片展示一下gifsicle 的压缩效果

      ➜  du -h ./test.gif
      1.2M	./test.gif
      ➜  gifsicle -O3 --colors=64 --resize-fit-height=600 ./test.gif > ./test_optimize.gif
      ➜  du -h ./test_optimize.gif
      488K	./test_optimize.gif
    
  • 在线工具

    上面提供的几款工具都是将视频转化为gif的,但是部分gif转化后占用空间还是很大,因此可以通过一些gif的压缩工具来修改大小,下面是几款在线的压缩工具:



PS:我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=10zhijuy24v4f

赞赏

取消
微信扫一扫,赞赏子勰
扫码支持
屌丝程序猿,鸡血攻城狮!努力学技术,潜心做精品!