Created
October 10, 2013 18:40
-
-
Save sbosell/6923321 to your computer and use it in GitHub Desktop.
Animados con Angular Parte II
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{"name": "pusheen", "width":96, "height": 100, "nframes": 4, "rframes": 2, "url": "https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-ash3/s296x100/851578_185127901661476_1172208870_n.png", "speed": 200}, | |
{"name": "anooki", "width":480, "height":480, "nframes": 13, "rframes":4 , "url":"https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-prn1/p480x480/851584_629578030410264_540358936_n.png", "speed": 100}, | |
{"name": "beast", "width":150, "height":100, "nframes": 5, "rframes": 3, "url": "https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-prn1/s296x100/851560_668853719808805_601127660_n.png", "speed": 50} | |
] | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// lucuma tiene los modulos externales que usamos, safeApply y timeFunctions | |
var app = angular.module('plunker', ['ui.bootstrap', 'ui.slider', 'lucuma']); | |
app.value('stickerJson', 'animacion.json'); | |
app.controller('MainCtrl', function ($scope, $rootScope, $modal, stickerJson, $http) { | |
$scope.stickersData = []; | |
$scope.stickers = []; | |
$scope.speed = 200; | |
$scope.isAnimated = false; | |
$http.get(stickerJson).success(function (data) { | |
//$scope.stickersData = [pusheen, anooki, beast]; | |
$scope.stickersData = data; | |
}); | |
// function que abrirá el modal | |
$scope.open = function () { | |
var modalInstance = $modal.open({ | |
templateUrl: 'sticker.html', | |
controller: ModalInstanceCtrl, | |
resolve: { | |
items: function () { | |
// queremos mandar stickersData al controlador de Modal | |
return $scope.stickersData; | |
} | |
} | |
}); | |
modalInstance.result.then(function (selectedItem) { | |
$scope.animation = selectedItem; | |
// copiaremos los datos de sticker | |
var cpy = angular.copy(selectedItem); | |
// colocar el sticker en un array, este array es lo que muestra los stickers en la pagina | |
$scope.stickers.push(cpy); | |
}, function () { | |
// dismiss modal | |
}); | |
}; | |
}); | |
// esta funcion es el controller para el modal. mandamos el array de stickers | |
var ModalInstanceCtrl = function ($scope, $modalInstance, items) { | |
$scope.items = items; | |
$scope.selected = { | |
item: $scope.items[0] | |
}; | |
$scope.ok = function () { | |
$modalInstance.close($scope.selected.item); | |
}; | |
$scope.changeSticker = function (item) { | |
$scope.selected.item = item; | |
$modalInstance.close($scope.selected.item); | |
}; | |
$scope.cancel = function () { | |
$modalInstance.dismiss('cancel'); | |
}; | |
}; | |
// La carne del app, el directive que muestra nuestro sticker | |
app.directive('sticker', function (timeFunctions, safeApply) { // inyectamos timeFunctions y safeApply | |
return { | |
restrict: 'AE', // podria ser atributo o elemento | |
replace: true, // vamos a reempleazar el html con nuestro template | |
scope: { | |
Animation: '=animation' // tiene un dato lo que es el objeto de la animacion | |
}, | |
template: '<div class="sticky"></div>', // nuestro template para el sticker, un div con estilo | |
link: function (scope, element, attrs) { | |
// guardar info del sticky animacioin | |
// usamos este en nuestra funcion para calcular y | |
// visualizar el sticker | |
var stickyInfo = { | |
width: 0, | |
height: 0, | |
index: 0, | |
nRows: 0, | |
nCols: 0, | |
nFrames: 0 | |
}; | |
// estamos haciendo un watch en Animation para ver si tenemos algo | |
scope.$watch('Animation', function (Animation) { | |
// cuando tengamos animacion, vamos a ininiarlo y lanzarlo | |
if (Animation) { | |
console.log(Animation.name); | |
stickyInfo.nRows = Math.ceil(Animation.nframes / Animation.rframes); | |
stickyInfo.index = 0; | |
stickyInfo.nCols = Animation.rframes; | |
stickyInfo.nFrames = Animation.nframes; | |
stickyInfo.width = Animation.width / Animation.rframes; | |
stickyInfo.height = Animation.height / stickyInfo.nRows; | |
// ininicar la animacion | |
element.css({ | |
'backgroundPosition': '0 0', | |
'background-image': 'url(' + Animation.url + ')', | |
'width': stickyInfo.width + 'px', | |
'height': stickyInfo.height + 'px' | |
}); | |
scope.isAnimated = true; //queremos verlo animado siempre | |
} | |
}); | |
scope.$watch('isAnimated', function (isAnimated) { | |
// cuando isAnimated cambie necesitamos lanzarlo o pararlo | |
if (scope.isAnimated) { | |
startAnimation(); | |
} else { | |
timeFunctions.$clearInterval(scope.animateTimeout); | |
} | |
}); | |
/* function isNumber(n) { | |
return !isNaN(parseFloat(n)) && isFinite(n); | |
} */ | |
scope.$watch('Animation.speed', function (speed) { | |
// cuando speed cambie, necesitamos reininciar la animacion con nueva velocidad | |
if (speed) { | |
if (!scope.isAnimated) { | |
safeApply(scope, function () { | |
scope.isAnimated = true; | |
}); | |
} else { | |
startAnimation(); | |
} | |
} | |
}); | |
function startAnimation() { | |
// empezar animacion | |
if (scope.isAnimated) { | |
timeFunctions.$clearInterval(scope.animateTimeout); | |
} | |
scope.animateTimeout = timeFunctions.$setInterval(animateBg, scope.Animation.speed, scope); | |
} | |
function animateBg() { | |
// camibar la pos de BG para la animacion | |
element.css({ | |
'backgroundPosition': calcBgPosition(stickyInfo.index, stickyInfo.nRows, stickyInfo.nCols, stickyInfo.nFrames, stickyInfo.width, stickyInfo.height) | |
}); | |
stickyInfo.index++; | |
} | |
element.bind('click', function (e) { | |
e.preventDefault(); | |
safeApply(scope, function () { | |
scope.isAnimated = !scope.isAnimated; | |
}); | |
}); | |
function calcBgPosition(index, nRows, nCols, nFrames, width, height) { | |
var i = index % nFrames; | |
var x = 0, | |
y = 0; | |
x = (i % nCols) * width * -1; | |
y = Math.floor(i / (nCols)) * height * -1; | |
return x + 'px ' + y + 'px'; | |
} | |
} | |
}; | |
}); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html ng-app="plunker"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>AngularJS Plunker</title> | |
<script>document.write('<base href="' + document.location + '" />');</script> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
<script data-require="[email protected]" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" ></script> | |
<script src="lucuma.js"></script> | |
<script src="angular-slider.js"></script> | |
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> | |
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> | |
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css" rel="stylesheet"> | |
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> | |
<script src="app.js" ></script> | |
<link href='style.css' rel='stylesheet' /> | |
</head> | |
<body ng-controller='MainCtrl'> | |
<h1>Facebook Stickers - Animados con Angular</h1> | |
<div ng-hide='stickersData.length>0' style='display:block'>Getting sticker info...</div> | |
<button ng-click='open()' ng-show='stickersData.length>0' style='display:none' >Stickers</button> | |
<div class='container'> | |
<div class="row" ng-repeat='sticky in stickers'> | |
<div class="col-icon"> <sticker animation='sticky'></sticker> | |
</div> | |
<div class="col-slider"> | |
<div class="slider" ui-slider="{orientation: 'vertical'}" min="20" max="1000" step="10" ng-model="sticky.speed"></div> | |
<label>{{sticky.speed}}</label> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="modal-header"> | |
<h3>Select your Sticker</h3> | |
</div> | |
<div class="modal-body"> | |
<div ng-repeat="item in items"> | |
<a ng-click="changeSticker(item)"><sticker animation='item' isanimated='false' speed='0'></sticker></a> | |
</div> | |
</div> | |
<div class="modal-footer"> | |
<button class="btn btn-primary" ng-click="ok()">OK</button> | |
<button class="btn btn-warning" ng-click="cancel()">Cancel</button> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment