How to make an explanatory GIF animation?

Question

IT education

Hello!
There is, for example, such an animation example that better explains the mobile application ( https://twitter.com/Outlook/status/722804017525600256 ).
The question is, how is it easier to do something like this on a Mac? I'm recording iPhone screen with QuickTime Player but can't figure out how to edit. Let's add an animation so that you can see where I tap on the screen, add a background for example.
Someone knows simple and preferably free editors with such functionality, perhaps someone has done something similar in the past?

Answer 1

I can explain how to do this on android.
First you need to record a video of all the actions from the phone.
To do this, connect the phone via a USB cable to the computer (USB debugging mode must be enabled). You can also enable the display of taps on the screen in the phone settings.
Then from the folder where the android SDK is installed (I have it d:\Android\sdk\platform-tools\) we execute the command
adb shell screenrecord --bit-rate 8000000 --time-limit 30 /sdcard/video.mp4
Now it will be written A 30-second video of all our actions on the phone with a bit rate of 8Mbps.
We take the received mp4, edit it in a video editor and make gif-ku from the video. Tools can be found online. There are also online converters

Answer 2

The other day, friends just shared a lesson (in English) on how they made an interactive demo. Static screenshots and jQuery.
github.com/tagspace/trevor-demo

Answer 3

I did and do on Flash, you can export to gif