Apple News Format: Scalable Images and Component Animations

article.json

{
	"version": "1.1",
	"identifier": "sketchyTech_Demo",
	"title": "My First Article",
	"language": "en",
	"layout": {},
	"components": [{
		"role": "title",
		"text": "My First Article",
		"textStyle": "titleStyle",
		"animation": {
			"type": "move_in",
			"preferredStartingPosition": "left"
		}
	}, {
		"role": "photo",
		"animation": {
			"type": "move_in",
			"preferredStartingPosition": "right"
		},
		"URL": "bundle://image2.jpg"
	}, {
		"role": "body",
		"format": "markdown",
		"text": "This is just over the minimum amount of _JSON_ required to create a valid article in Apple News Format. If you were to delete the dictionary enclosing this text, you'd be there.",
		"textStyle": "bodyStyle"
	}],
	"componentTextStyles": {
		"titleStyle": {
			"textAlignment": "center",
			"fontName": "HelveticaNeue-Bold",
			"fontSize": 64,
			"lineHeight": 74,
			"textColor": "#000"
		},
		"bodyStyle": {
			"textAlignment": "left",
			"fontName": "Georgia",
			"fontSize": 18,
			"lineHeight": 26,
			"textColor": "#000"
		}
	},
	"textStyles": {
		"redText": {
			"textColor": "#FF00007F"
		}
	}
}

Once you have the basic structure of an Apple News Format article you can explore adding scalable images and animations.

The role for a scalable image is the type of image: Figure, Photo, or Portrait. There is also an Image component of which the only supported role is currently logo. As with Gallery and Mosaic images, all images must be contained within the same folder as the article.json file and must be JPEG, PNG or GIF format. They are referenced as being in the bundle, e.g. "URL": "bundle://image2.jpg"

There are four types of Component Animations: Appear, Fade-in, Move-in, Scale Fade.