终端开发

Android开发之FileProvider相关知识 Android 权限 及设置描述信息 局域网开启 Android ADB 无线调试 安卓开发那些事之开发规范 安卓组件化之组件通信及拦截 安卓开发那些事之版本管理 安卓组件化之持续集成与自动构建 安卓组件化之组件调试和运行 安卓组件化之组件管理(导入、依赖、升级) 安卓组件化之框架设计 安卓开发那些事总纲 Android Textview 对HTML 的支持 appium 爬坑之基于 Chromedriver 测试 Android webview Linux 搭建 Android 编译构建环境 appium爬坑之iMac上基于appium多设备并发测试 appium爬坑之iMac上appium环境搭建及使用真机测试Android项目简介 H5页面通过指定Schema拉起Android应用 Android JSBridge简介 Gradle插件开发系列之发布gradle插件到开源库 Gradle插件开发系列之开发第一个gradle插件 Gradle插件开发系列之gradle插件调试方法 Gradle插件开发系列之总纲 一款检查Gradle依赖配置是否冲突的插件 记一次升级Android Gradle Plugin后databing编译报错填坑经历 iMac上 Xcode 相关设置及常见问题 iOS开发 -- 首次使用Xcode运行iOS项目代码 使用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 Android开发常用命令备忘 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命令系列之再说ADB 再看Android官方文档之分享 再看Android官方文档之Fragment&数据保存 再看Android官方文档之Activity&Intent 再看Android官方文档之ActionBar和兼容性 ADB命令系列之 adb shell input(Android模拟输入)简单总结 再看Android官方文档之建立第一个APP Android开发调试常用工具 ANR(网络资料整理) Java参数引用传递引发的惨案(又一次Java的String的“非对象”特性的踩坑经历) android.view.WindowManager$BadTokenException,Unable to add window Android签名校验机制(数字证书)及命令行获取 keystore 公钥等信息 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的那些坑…………

开发工具

Linux JDK 安装、卸载、路径查看 替换Jcenter,发布开源代码到 Sonatype Maven Central 使用 gitstats 分析代码仓库 使用 Jekyll 搭建技术博客并部署到 CentOS 服务器 开发中常用的文档管理、云端笔记等效率工具介绍 iMac(OS X)常用图片处理工具介绍 使用 Octopress 搭建技术博客并使用腾讯云静态网站托管 使用腾讯云静态网站托管个人博客 使用 Jekyll 搭建技术博客 iMac上安装Python2.7 和 Python3 iMac 使用自带的 Apache 启用本地web服务 发布开源代码到jcenter Gradle环境变量那些事 iMac搭建jekyll本地环境 iMac(OS X)开发和使用中经验汇总(持续更新) iMac配置基于crontab的定时任务 iMac配置支持读取NTFS硬盘 新iMac机器装机及开发环境搭建攻略 git常用命令整理(已包括branch、tag等持续更新~) iMac使用过程中的简单故障解决 iMac上RubyGems相关的问题汇总 开发中常用的一些Chrome插件介绍 iMac(OS X)日常开发中各种代理设置方法汇总(shell、Android Studio、gem、npm) Markdown格式优化及使用技巧 iMac下制作含透明度图片及判断图片透明度 iMac(OS X)中设置大小写敏感的分区并切换 Linux & MacOS中一些常用命令备忘 iMac(OS X)搭建私有maven仓库,提供Nexus Responsitory镜像 iMac(OS X)El Capitan 更新遇到的那些坑 vi常用命令 iMac(OS X)常用开发工具介绍 iMac(OS X)不可或缺的套件管理器 —— Homebrew 开发环境通用设置 windows中一些常用命令备忘 问题定位之快速模拟请求 Ant中的SVN 使用 Markdown语法简介 SVN 常用命令

标签

android 50

ADB快捷输入法 - AAF 开发中图片图标处理常用工具资源 Linux 搭建 Android 编译构建环境 H5页面通过指定Schema拉起Android应用 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命令系列之再说ADB 再看Android官方文档之分享 再看Android官方文档之Fragment&数据保存 再看Android官方文档之Activity&Intent 再看Android官方文档之ActionBar和兼容性 ADB命令系列之 adb shell input(Android模拟输入)简单总结 再看Android官方文档之建立第一个APP Android开发调试常用工具 ANR(网络资料整理) Java参数引用传递引发的惨案(又一次Java的String的“非对象”特性的踩坑经历) android.view.WindowManager$BadTokenException,Unable to add window Android签名校验机制(数字证书)及命令行获取 keystore 公钥等信息 Eclipse使用中部分经验总结 Android内存耗用之VSS/RSS/PSS/USS ADB命令系列之 Advanced Command URL编码中的空格(编码以后变为+) Android MD5后 bye数组转化为Hex字符串的坑(记一次为女神排忧解难的经历) Android学习之路 ADB命令系列之 Base Command Android Log的那些坑…………

tags 53

替换Jcenter,发布开源代码到 Sonatype Maven Central Android开发之FileProvider相关知识 子勰开源项目展示 照片整理系之视频归档整理方案 使用 gitstats 分析代码仓库 Android 权限 及设置描述信息 局域网开启 Android ADB 无线调试 安卓开发那些事之开发规范 安卓组件化之组件通信及拦截 安卓开发那些事之版本管理 安卓组件化之持续集成与自动构建 安卓组件化之组件调试和运行 安卓组件化之组件管理(导入、依赖、升级) 安卓组件化之框架设计 安卓开发那些事总纲 Android Textview 对HTML 的支持 使用 Jekyll 搭建技术博客并部署到 CentOS 服务器 2018年春节仙本那海岛游行程规划 照片整理系列之单次整理流程 照片整理系列之整理及归档的总体方案 使用 Octopress 搭建技术博客并使用腾讯云静态网站托管 使用腾讯云静态网站托管个人博客 使用 Jekyll 搭建技术博客 颜色透明度对照表 Android JSBridge简介 Gradle插件开发系列之发布gradle插件到开源库 Gradle插件开发系列之开发第一个gradle插件 Gradle插件开发系列之gradle插件调试方法 发布开源代码到jcenter Gradle环境变量那些事 Gradle插件开发系列之总纲 一款检查Gradle依赖配置是否冲突的插件 记一次升级Android Gradle Plugin后databing编译报错填坑经历 服务器 迁移到 腾讯云 记录 2018年春节沙巴仙本那海岛游 聚会桌游助手 nodejs入门之后台服务的几种启动方式 nginx下多域名配置示例 nodejs入门之连接mysql mysql迁移之新建用户、备份还原数据库 iMac配置基于crontab的定时任务 iOS开发 -- 首次使用Xcode运行iOS项目代码 新iMac机器装机及开发环境搭建攻略 旅行中不可或缺的软件 iMac上RubyGems相关的问题汇总 接口设计六大原则 Canvas上更高效的画SVG 微信小程序开发之SVG的使用 旅行出行前准备列表 使用Android Studio开发可独立运行(runnable)混淆过的Jar程序 2017年端午川西滇北香格里拉环线(近200张图慎点) 照片整理系列之基于命令行的照片整理及查看工具 Gradle 相关资料汇总

制作终端产品演示的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的压缩工具来修改大小,下面是几款在线的压缩工具:


赞赏

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