Saturday, November 2, 2013

Create simple animations in apps using the animation library in SharePoint 2013

http://code.msdn.microsoft.com/office/SharePoint-2013-Create-4ea581ba
vs2012->file->new->project c# ->office/SharePoint->apps->apps for SharePoint 2013-> "SimpleSPAnimationDemo"
SimpleSPAnimationDemo -> Content -> Add existing item -> add 'Photo.png'
SimpleSPAnimationDemo -> Pages -> Default.aspx
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div>
        <p id="message">
            initializing...
        </p>
    </div>
    <div id="toolbar">
        <input type="button" id="cmdHidePhoto" value="Hide Photo" />
        <input type="button" id="cmdShowPhoto" value="Show Photo" />
        <input type="button" id="cmdEnlargePhoto" value="Enlarge Photo" />
        <input type="button" id="cmdChangeOpacity" value="Change Opacity" />
    </div>
    <div>
        <img id="photo1" src="../Content/photo.jpg" />
    </div>

</asp:Content>
SimpleSPAnimationDemo -> Scripts -> App.js
'use strict';

var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();

$(document).ready(function () {
    $("#cmdHidePhoto").click(onHidePhoto);
    $("#cmdShowPhoto").click(onShowPhoto);
    $("#cmdEnlargePhoto").click(onEnlargePhoto);
    $("#cmdChangeOpacity").click(onChangeOpacity);
    getUserName();
});

function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}

function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
}

function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}

function onHidePhoto() {
    var photo1 = document.getElementById("photo1");
    SPAnimationUtility.BasicAnimator.FadeOut(photo1);
}

function onShowPhoto() {
    var photo1 = document.getElementById("photo1");
    SPAnimationUtility.BasicAnimator.FadeIn(photo1);
}

function onEnlargePhoto() {
    var photo1 = document.getElementById("photo1");
    SPAnimationUtility.BasicAnimator.Resize(photo1, 500, 500);
}

function onChangeOpacity() {

    var photo1 = document.getElementById("photo1");

    var state = new SPAnimation.State();
    state.SetAttribute(SPAnimation.Attribute.Opacity, 0.2);
    var animation = new SPAnimation.Object(SPAnimation.ID.Basic_Opacity, 500, photo1, state);

    animation.RunAnimation();

}

Thank You

No comments:

Post a Comment