JavaScript famous/modifiers/StateModifier setOpacity示例

示例#1

文件： One_TwoMayaIntroView.js 项目： CatherineWong/CatherineWong.github.io

	function _createHuts() {

		var hut = new ImageSurface ({
			size : [700, 700],
			content: 'animation-assets/yurt-1.svg'
		});

		var placeHut = new StateModifier ({
			align : [0.5, 0.5],
			origin : [0.3, 0.5],

			transform: Transform.scale(0, 0, 1),
			// sets inital opacity to 0
			opacity: 0
		});
		this.add(placeHut).add(hut);

		// animates x- and y-scale to 1
		placeHut.setTransform(
			Transform.scale(1, 1, 1),
			{ duration : 1000, curve: Easing.outBack }
		);
		// animates opacity to 1
		placeHut.setOpacity(1, {
			duration: 1000, curve: Easing.outBack
		});

		var chickens = new ImageSurface ({
			size : [150, 150],
			content: 'animation-assets/chickens.svg'
		});

		var placeChickens= new StateModifier ({
			align : [0.35, 0.8],
			origin : [0.9, 0.3],
			// sets initial x- and y-scale to be 0
			transform: Transform.scale(0, 0, 1),
			// sets inital opacity to 0
			opacity: 0
		});

		var bringToFront = new StateModifier();
		bringToFront.setTransform(Transform.inFront);

		this.add(placeChickens).add(bringToFront).add(chickens);

		// animates x- and y-scale to 1
		placeChickens.setTransform(
			Transform.scale(1, 1, 1),
			{ duration : 1000, curve: Easing.outBack }
		);
		// animates opacity to 1
		placeChickens.setOpacity(1, {
			duration: 1000, curve: Easing.outBack
		});

	}

示例#2

文件： AnimationController.js 项目： CatherineWong/CatherineWong.github.io

    AnimationController.prototype.initialize = function(pageView) {
        var fadeOutModifier = new StateModifier();
        fadeOutModifier.setTransform(Transform.behind);
        fadeOutModifier.setOpacity(0, {
            duration: 1000, curve: Easing.outBack
        });

        var sendToBackModifier = new StateModifier();
        sendToBackModifier.setTransform(Transform.behind);
        sendToBackModifier.setOpacity(1, {
            duration: 1000, curve: Easing.outBack
        });

        renderController = new RenderController(null, sendToBackModifier, fadeOutModifier, false);
        pageView.layout.content.add(renderController);
    }

示例#3

文件： HariIntroView.js 项目： CatherineWong/medic-mobile-tutorials

	function _createHuts() {

		var health_center = new ImageSurface ({
			size : [400, 500],
			content: 'animation-assets/rural-clinic-gold.svg'
		});

		var place_health_center= new StateModifier ({
			align : [0.5, 0.5],
			origin : [0.5, 0.5],
			// sets initial x- and y-scale to be 0
			transform: Transform.scale(0, 0, 1),
			// sets inital opacity to 0
			opacity: 0
		});
		this.add(place_health_center).add(health_center);

		// animates x- and y-scale to 1
		place_health_center.setTransform(
			Transform.scale(1, 1, 1),
			{ duration : 1000, curve: Easing.outBack }
		);
		// animates opacity to 1
		place_health_center.setOpacity(1, {
			duration: 1000, curve: Easing.outBack
		});
	}

示例#4

文件： stateModifiers.js 项目： stefanRitter/famo.us_university

define(function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');

var mainContext = Engine.createContext();

var surface = new Surface({
    properties: {
        backgroundColor: '#FA5C4F'
    }
});

var stateModifier = new StateModifier({
    size: [200, 200],
    origin: [0.5, 0.5],
    align: [0.5, 0.5],
    // sets initial x- and y-scale to be 0
    transform: Transform.scale(0, 0, 1),
    // sets inital opacity to 0
    opacity: 0
});

mainContext.add(stateModifier).add(surface);

// animates x- and y-scale to 1
stateModifier.setTransform(
    Transform.scale(1, 1, 1),
    { duration : 2000, curve: Easing.outBack }
);

// animates opacity to 1
stateModifier.setOpacity(1, {
    duration: 2000, curve: Easing.outBack
});

});

示例#5

文件： LailaIntroView.js 项目： CatherineWong/medic-mobile-tutorials

	function _createHuts() {

		var hut = new ImageSurface ({
			size : [400, 500],
			content: 'animation-assets/village-yurt.svg'
		});

		var placeHut= new StateModifier ({
			align : [0.5, 0.5],
			origin : [0.0, 0.25],
			// sets initial x- and y-scale to be 0
			transform: Transform.scale(0, 0, 1),
			// sets inital opacity to 0
			opacity: 0
		});
		this.add(placeHut).add(hut);

		// animates x- and y-scale to 1
		placeHut.setTransform(
			Transform.scale(1, 1, 1),
			{ duration : 1000, curve: Easing.outBack }
		);
		// animates opacity to 1
		placeHut.setOpacity(1, {
			duration: 1000, curve: Easing.outBack
		});

		var chickens = new ImageSurface ({
			size : [50, 50],
			content: 'animation-assets/chickens.svg'
		});

		var placeChickens= new StateModifier ({
			align : [0.5, 0.7],
			origin : [0.2, 0.8],
			// sets initial x- and y-scale to be 0
			transform: Transform.scale(0, 0, 1),
			// sets inital opacity to 0
			opacity: 0
		});
		this.add(placeChickens).add(chickens);

		// animates x- and y-scale to 1
		placeChickens.setTransform(
			Transform.scale(1, 1, 1),
			{ duration : 1000, curve: Easing.outBack }
		);
		// animates opacity to 1
		placeChickens.setOpacity(1, {
			duration: 1000, curve: Easing.outBack
		});

		var maya = new ImageSurface ({
			size : [130, 130],
			content: 'animation-assets/anc-trimester1.svg'
		});

		var placeMaya= new StateModifier ({
			align : [0.2, 0.78],
			origin: [0.0, 0.2]
		});
		this.add(placeMaya).add(maya);


		placeMaya.setTransform(
			Transform.translate(350, 0, 0),
			{duration: 100, curve: 'easeInOut'}
		);

	}