Leonid Trofymchuk stesel

This notes is written by Sheldon. You can find me with #iOSBySheldon in Github, Youtube, Facebook, etc.

Need

Convert .mov/.MP4 to .gif

Reason

As a developer, I feel better to upload a short video when I create the pull request to show other viewers what I did in this PR. I tried .mov format directly got after finishing recording screen using Quicktime, however, gif offers preview in most web pages, and has smaller file size.

This is not limited to developer, anyone has this need can use this method to convert the files.

	import * as React from "react";

	const physicsStyle: React.CSSProperties = {
	width: containerWidth,
	height: containerHeight,
	display: "block",
	border: "1px solid red",
	position: "fixed",
	left: "0",
	top: "0",

	const StringPhysics: React.FunctionComponent = () => {
	...
	return (
	<div
	style={physicsStyle}
	onMouseDown={onMouseDown}
	onMouseMove={onMouseMove}
	onMouseUp={onMouseUp}
	onMouseLeave={onMouseUp}
	onTouchStart={onTouchStart}

	const StringPhysics: React.FunctionComponent = () => {
	...
	const onMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
	onStartPull({
	x: event.clientX,
	y: event.clientY,
	});
	};
	const onMouseMove: React.MouseEventHandler<HTMLDivElement> = event => {
	onPull({

	const StringPhysics: React.FunctionComponent = () => {
	...
	const onStartPull = (point: Point) => {
	if (isDraggableRectangle(point)) {
	setDraggable(true);
	setDraggablePoint(point);
	}
	};
	const onPull = (point: Point) => {
	if (isDraggable) {

	const StringPhysics: React.FunctionComponent = () => {
	...
	useAnimation(() => {
	if (isDraggable) {
	setPoint(draggablePoint);
	setAmplitude(draggablePoint.y - startPoint.y);
	} else {
	setPoint(getNextPosition(point, amplitude, time));
	setAmplitude(getNextAmplitude(amplitude, time));
	setTime(v => v + 1 / FRAME_RATE);

	const StringPhysics: React.FunctionComponent = () => {
	const [isDraggable, setDraggable] = React.useState(false);

	const [draggablePoint, setDraggablePoint] = React.useState<Point>({
	x: containerWidth / 2,
	y: startPoint.y,
	});,
	const [point, setPoint] = React.useState<Point>({
	x: draggablePoint.x,
	y: draggablePoint.y,

	import * as ReactDOM from "react-dom";

	const rootElement = document.getElementById("root");
	ReactDOM.render(<StringPhysics />, rootElement);

	import * as React from "react";

	const style: React.CSSProperties = {
	width: containerWidth,
	height: containerHeight,
	display: "block",
	border: "1px solid red",
	position: "fixed",
	left: "0",
	top: "0",

	import * as React from "react";

	function useAnimation(callback: () => void) {
	const callbackRef = React.useRef<() => void>();
	callbackRef.current = callback;
	const frameRef = React.useRef<number>();

	callbackRef.current = () => {
	callback();
	frameRef.current = requestAnimationFrame(callbackRef.current);